Adjusting height in CSS can be done dynamically based on the content within

Currently, I am working on a project where I need the submenu to adjust based on content. The issue is that right now, the submenu has a fixed capacity of 4 items. For example, when you click on 'sale', it displays 4 submenu items perfectly. However, when clicking on 'dashboard', it only shows three items and leaves an empty space.

The problem seems to be related to the height assigned to my label class:

input[type='radio']:checked + label {
  height: 325px;

I have tried setting the height to 100% and using overflow:auto, but unfortunately, the height of the submenu does not adjust dynamically as expected.

If anyone has any ideas or suggestions on how I can set the height of the submenu dynamically based on the content, I would greatly appreciate it!

You can view the CodePen for this issue here: https://codepen.io/anon/pen/gwjvvw

htmlcss

Answer №1

To ensure the height adjusts according to content, you must set height: auto;. However, if your content's height is being affected by floating and absolute positioning, causing it to essentially be 0, you need to address those issues as well.

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

input[type='radio'] {
  display: none;
}

label {
  cursor: pointer;
}

::-webkit-scrollbar {
  display: none;
}
/* More CSS styles continue... */

HTML structure for cleaner presentation:

Here's a sample of how the HTML can be structured better:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
/* CSS rules for clean HTML layout */
body {
  height: 100vh;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
}
/* Animation keyframes, etc. */

<ul class="swanky_wrapper">
  <li>
    <input id="Dashboard" name="radio" type="radio"></input>
    <label for="Dashboard">Dashboard</label>
    <ul>
      <!-- Sub-menu items -->
    </ul>
  </li>
  <li>
    <input id="Sales" name="radio" type="radio"></input>
    <label for="Sales">Sales</label>
    <ul>
      <!-- Sub-menu items -->
    </ul>
  </li>
  <!-- Additional menu items with submenus -->
</ul>

Answer №2

Leave out any references to height. Allow the div to adjust its own height based on the content within.

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

What is the code to incorporate a color using PHP?

Question: Is there a way to indicate approval with green color and decline with red color? I've searched for a solution but couldn't find one. PHP Code: <?php if(isset($_POST['approve'])) { $msg = "Approved"; ...

phphtmlcssdatabase

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go abou ...

cssselenium-webdriverxpathwebdriverwebdriver-io

MUI useStyles/createStyles hook dilemma: Inconsistent styling across components, with styles failing to apply to some elements

I have been trying to style my MUI5 react app using the makeStyles and createStyles hooks. The root className is being styled perfectly, but I am facing an issue with styling the logoIcon. Despite multiple attempts to debug the problem, I have not been suc ...

javascriptcssreactjsmaterial-ui

How to vertically align content using Zurb Foundation's equalizer feature?

I am currently utilizing Zurb Foundation 5 along with the equalizer component. In a scenario where I have three columns of equal width, I am aiming to achieve vertical center alignment for the content (text) in the middle column and vertical bottom alignme ...

csszurb-foundation

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...

csshtmlvideoembedcss-position

Toggle the visibility of 2 Form Fields by checking the Checkbox

Hi, I am trying to display two form fields when a checkbox is selected. These fields are required, so they should only be displayed when the checkbox is checked and should be mandatory. However, I am facing issues with hiding the fields when the checkbox i ...

jqueryhtmlformsshow-hiderequired

Initiate Bootstrap 4 dropdown menus from the initial menu point

I need the dropdown menus to align with the position of the first dropdown. There are multiple dropdowns on the page. Check out the screenshot for reference. JSFiddel: https://jsfiddle.net/kfh9Lbep/ Any ideas on how to achieve this alignment? <div cl ...

jquerytwitter-bootstrapcssbootstrap-4

Certain content appears oversized on Android devices, yet appears appropriately sized on desktop computers

I am experiencing an issue with a webpage where the text appears normal on desktop but is too big on Android devices. Below is the code snippet causing the problem: <!DOCTYPE html> <html> <head> <title>ra ...

androidhtmlcsstext

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

htmlcsspositioning

A numeric input area that only accepts decimal numbers, with the ability to delete and use the back

I have successfully implemented a code for decimal numbers with only two digits after the decimal point. Now, I am looking to enhance the code in the following ways: Allow users to use backspace and delete keys. Create a dynamic code that does not rely o ...

javascriptjqueryhtml

Swap out a term in a sentence with an interactive span element in real-time

I'm struggling with a seemingly simple task, and I feel quite embarrassed that I can't seem to solve it. My goal is to identify words in a string that begin with '@' or '#' and change their color to blue. The string itself com ...

javascripthtmlcssdynamic

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify

When an element is set to a fixed position while scrolling, it causes the element to flicker

After implementing the jQuery plugin stickyjs on my website, I noticed a strange issue. While it works perfectly fine on my Mac, when using the mouse scroll wheel on my PC, the element blinks once rapidly as it reaches the top of the page. Interestingly, d ...

jqueryhtmlcsssticky

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Best practices for displaying code blocks within an AngularJS application

Currently, I am in the process of building a website focusing on AngularJS within AngularJS ;-) To accomplish this, I have included ng-app within the body element. As a result, all my code snippets (enclosed in <pre><code> ... </code>&l ...

javascripthtmlangularjspre

Tips for identifying the correct selectedIndex with multiple select elements present on one page

How can I maintain the correct selectedIndex of an HTMLSelectElement while having multiple select elements in a loop without any IDs? I am dynamically loading forms on a webpage, each containing a select element with a list of priorities. Each priority is ...

javascriptjqueryhtmlcss

Cursor vanishes until mouse movement detected (Chrome browser)

In the HTML page I created, the mouse cursor is initially set to none. However, there are certain circumstances where I need it to switch to crosshair. The issue I am facing is that the cursor does not appear unless the user moves the mouse. If the mouse r ...

htmlcss

Display the picture for a few moments, then conceal it. A button will appear to reveal the following image after a short period

For my project, I want to create a webpage for school where I display one image that disappears after 5 seconds, followed by a button. The user must click the button before the next image appears and stays for another 5 seconds. This sequence repeats each ...

javascriptjqueryhtml

Make the background image come to life by animating it from the bottom to the top in

Upon landing on a page, I aim for the background image to initially focus on the bottom and then pan up to the top before returning back down in a continuous loop. The code I have set up is as follows: <body> <div id="container"></div&g ...

jqueryhtmlcssjquery-animate

downloading responsive design

Using media queries to define backgrounds with separate images based on browser size: @media (min-width:1440px){div.container{background:URL('bg1440.png');}} @media (min-width:960px){div.container{background:URL('bg960.png');}} @media ...

htmlcssmedia-queries