It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/

I am attempting to adjust the left navigation menu on the screen.

  <main class="flex flex-grow w-full h-screen">
  <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm:block">
    <div class="flex flex-grow flex-col justify-between h-full p-4 bg-gray-800">
        <div class="text-sm">
          <div class="bg-gray-900 text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">Backlog</div>
          <div class="bg-gray-700 text-blue-300 p-2 rounded mt-2 cursor-pointer">Board</div>
          <div class="bg-gray-900 flex justify-between items-center text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">
            <span>Reports</span>
            <span class="w-4 h-4 bg-blue-600 rounded-full text-white text-center font-normal text-xs">5</span>
          </div>
          <div class="bg-gray-900 text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">Releases</div>
          <div class="bg-gray-900 text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">Components</div>
          <div class="bg-gray-900 text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">Repository</div>
        </div>

        <div class="flex p-3 text-white bg-red-500 rounded cursor-pointer text-center text-sm">
          <button class="rounded inline-flex items-center">
            <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd" /></svg>
            <span class="font-semibold">Logout</span>
          </button>
        </div>
    </div>
  </aside>

  <section class="w-full p-4">
    <div class="w-full h-64 border-dashed border-4 p-4 text-md">Dashboard</div>
    </section>

  </main>

I have experimented with various attributes such as grow, full, and flex-grow but still facing issues. Can anyone provide some assistance?

htmlcsstailwind-css

Answer №1

Eliminate the h-screen class from the <aside> tag

and instead, include this code before the main element:

<main class="flex flex-grow w-full" style="height: calc(100vh - 64px);">

This method may not be in line with Tailwind CSS standards, but it effectively sets the height of the element to the maximum screen height while subtracting the header height. You may also incorporate this into your own custom css or media queries.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Off-center alignment in left margin with Bootstrap 3

When using bootstrap 3, I have noticed that the left margin starts to indent gradually with each row. Here is a screenshot demonstrating the issue: please see here The code for the first two rows in the image looks like this: <div class="row"> ...

twitter-bootstrap-3htmlmargins

What is the best way to achieve full width for text on large screens in Bootstrap 3 while eliminating right margins?

I've been attempting to create a full-width text display on large screens using Bootstrap, but despite utilizing container-fluid and trying solutions from StackOverflow that should enable full width, there still remains whitespace at the right side of ...

csstwitter-bootstrap

How can line breaks be displayed in JavaScript text output?

I need assistance with creating a scrolling series of text messages that are separated by linebreaks. This is the current code I have: <script type="text/javascript" src="xbMarquee.js"></script> <script type="text/javascript"> <!-- ...

jqueryhtmlline-breaks

Saving data in a CSV file on your local device using HTML5

Is it possible to utilize HTML5 for saving or writing data to a local file on the user's file system? I am curious about this functionality, especially since HTML5 now offers the capability to export data from the client and save it as a CSV file. If ...

javascripthtmlcsv

The background only partially covers the section

In a current project test using the provided template from , I encountered an issue when changing the section <section role="main" id="main"> to incorporate the carbon class as the background does not fill completely. My attempts to adjust the secti ...

htmlcss

Angularjs drop-down menu changes images with animation

<body ng-controller="myCtrl"> <input type="checkbox" ng-model="loaded"/> <select ng-model="list"> <option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.id}}</option> </select> {{list}} &l ...

javascriptjqueryhtmlcssangularjs

"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...

cssvue.jsvuetify.js

What is the process for transmitting data in JSON format generated by Python to JavaScript?

Utilizing Python libraries cherrypy and Jinja, my web pages are being served by two Python files: Main.py (responsible for handling web pages) and search.py (containing server-side functions). I have implemented a dynamic dropdown list using JavaScript w ...

javascriptpythonhtmljsoncherrypy

Extracting null data from web scraping using Python and Beautiful Soup

I'm currently facing challenges with extracting the correct values from a website that provides prices for Silver, Gold, Palladium, and Platinum. You can find the website here. Below is the HTML structure of the website: <div id="header-tab ...

pythonhtmlweb-scrapingbeautifulsouppython-requests

Implementing an HTML5 Media Player with AngularJs via the $http Service

HTML View <audio ng-src="{{vm.videourlsce}}" autoplay preload="auto" controls="controls" autobuffer></audio> Retrieve data from a server in my controller using the $http service and update it to the player. var vm = this; vm.videourlsce = &a ...

angularjshtmlaudiohtml5-audio

Enhancing the Syntax of If and If Else in Jquery Functions

I'm struggling to simplify and optimize this block of code. Would appreciate any help in making it more efficient! var status = "closed"; $(document).on('click', '[data-toggle-nav]', function(event) { if ($(this) && status = ...

javascriptjqueryhtmlcss

How do I change the alignment of X axis labels in an Asp.net chart to be left-aligned instead of centered?

I've been struggling for hours trying to figure out this simple issue. I am working on creating a histogram using the asp chart control. My main problem is that I can't seem to get the x-axis label to appear on the left side of each column instea ...

c#cssasp.netchartshistogram

Button that vanishes when clicked, using PHP and HTML

I am in the process of creating an online store and I am seeking to implement a button that directs users to a new page, but then disappears permanently from all pages within the store. Here is the code snippet I have developed so far: <input class="b ...

javascriptphpjqueryhtml

section element is not receiving styles from the specified class

Whenever I want to ensure that a class is only used on specific elements, I usually prefix it with the element name. For example, using div.className limits the className styling to just div elements. However, when I tried the same approach with a section ...

htmlcss

Creating a dynamic step animation with jQuery: A step-by-step guide

Struggling to find resources on how to animate a color wheel using jQuery? Want to create a spiraling effect by gradually revealing colors at 45-degree intervals, like a loading GIF spiral? I need it to cycle through the defined colors in order and then cl ...

javascriptjquerycssjquery-animatecss-transitions

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...

htmlcsstailwind-css

Minimize or conceal iframe

This iframe contains a Google form that cannot be edited. I am looking for a way to close or hide this iframe, either through a button, a popup window button, or without any button at all. The $gLink variable holds the Google form link through a PHP sessio ...

javascriptphphtmliframe

Express.js - display the complete information

Trying to display an array of objects (highcharts points) is giving me some trouble. Instead of the actual data, I'm seeing [object Object]. It seems that JSON.stringify() doesn't play well with HTML. util.inspect also doesn't work as expe ...

javascripthtmlnode.jsexpress

I am trying to figure out how to style each box individually, but I'm running into some confusion. There are three different classes to choose from, with the child class

Struggling to style the ten boxes individually? Renaming each class of the box child didn't work as expected? Wondering how to select and style each box with a unique background color? Also facing issues with displaying the logo image on the navigatio ...

htmlcss

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter