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

Utilizing AngularJS to create a dynamic autocomplete feature with data sourced

I'm currently implementing an autocomplete feature using the REST Countries web service. The goal is to provide suggestions as the user starts typing in an input field, and once a country is selected, display information about it. I am considering usi ...

angularjshtmlapi

How can you combine accessibility with absolute positioning?

Have you seen our unique hamburger design? https://i.stack.imgur.com/AmT6P.png A simple click will reveal a neat popup (the class "open" is added to a div). https://i.stack.imgur.com/yPydJ.png This cool effect is achieved using fixed positioning, but i ...

htmlcssaccessibilitywcagwcag2.0

Ways to differentiate between buttons in a button cluster?

I have created a set of 3 buttons using the code from this resource. However, the buttons are currently positioned vertically close to each other as shown in the source code. I would like to adjust the spacing between them. Is there a way to achieve this ...

htmlcss

Methods for encoding and decoding special characters using either JavaScript or jQuery

I am looking for a solution to encode and decode various special characters using JavaScript or jQuery... ~!@#$%^&*()_+|}{:"?><,./';[]\=-` I attempted to encode them using the following code snippet... var cT = encodeURI(oM); // ...

javascriptphpjqueryhtmlencoding

Position the text in the exact center of an HTML element using absolute positioning

Hey there! I am currently working on a website and I'm trying to create a simple delete button that can be used throughout the site. However, I'm having trouble getting it positioned correctly... Here's what I have so far: <button id="c ...

htmlcss

Encountering an unusual overflow issue in mobile with React

When viewing on smaller screens, that specific section is visible. To ensure it remains visible, adjust all the div elements to 100vw. Any suggestions on how to accomplish this? Looking for recommendations on how to handle this situation. ...

htmlreactjsbootstrap-4

What steps should I take to repair my jQuery button slider?

I am facing a challenge with creating a carousel of three images in HTML using jQuery. When the user clicks on the "Next" or "Previous" buttons, I want to scroll through the images one by one. However, I am struggling to hide the other images when one is d ...

javascriptjqueryhtmlcssslider

What is the best way to merge two AngularJS form validation directives criteria using CSS?

When both $dirty and $invalid are true, I would like the input fields to have a red background. However, I am only able to do this one by one, which is not ideal. input.ng-dirty && input.ng-invalid { background-color: red; } ...

htmlcssangularjs

Bootstrap 5: After tapping on the button, the hue was transformed

I've been using Bootstrap buttons and I decided to change the color of one. However, when I clicked the button, it still changed to blue even though I specified ".btn-primary:active". HTML: <button type="button" class="btn btn-prima ...

htmlcsstwitter-bootstrapbootstrap-5

The desired outcome is not displayed following the Ajax post request

I have created an app that utilizes asynchronous AJAX requests to enable seamless chat functionality without refreshing the page. However, I'm facing an issue where the messages are not being displayed. When I inspect the network tab and navigate to t ...

phphtmlajax

MUI: tips for positioning text next to each other on a page

I need assistance aligning numbers and text side by side, similar to the image shown here: https://i.sstatic.net/gXzOM.jpg However, there is a margin to the right of the text(MASTER I 406), causing the numbers to not be in the correct position. Currently, ...

cssreactjsmaterial-ui

"Utilize AJAX to submit the value of the text box input from a jQuery slider when the Submit Button

Whenever I adjust the sliders, the value is shown in an input textbox. However, when I move the slider and check the values echoed from the textboxes on another PHP page, they are always displaying as 0. Even after clicking the submit button, it still echo ...

javascriptphphtmlajaxxmlhttprequest

What is the best way to load the nested array attributes in an HTML table dynamically with AngularJS?

I attempted the following code, but I am only able to access values for cardno and cardtype. Why can't I access the others? Any suggestions? <tr ng-repeat="data in myData17.layouts"> <td ng-show="$index==1">{{data.name}}</td> &l ...

javascripthtmlangularjsangularjs-ng-repeatdynamic-tables

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

javascriptjqueryhtml

What is the best way to obtain the inner ID with JQuery?

How can I assign values to inside id using JQuery? Sample code from controller.cs: public GroupModel Get() { IGroupTypeRepository groupTypeRepo = new GroupTypeRepository(); IGroupRepository groupRepo = new GroupRepository(); var model = new ...

javascriptjqueryhtmlasp.net-mvc

Tips for centering content in the middle of a line

How can I center align 3 buttons on a line using CSS and HTML? This is what I have tried so far: 1/ CSS : .center-buttons { display: flex; justify-content: center; } .button { margin: 0 10px; } 2/ HTML: <div class="row"> <di ...

htmlcsstwitter-bootstrapbootstrap-4

Forming a header area by utilizing a 960 Grid container

I'm in the process of designing a website utilizing the 960 Grid system. The header consists of three parts: the logo, the navigation, and the login form. I've implemented media queries to center both the logo and the login section when the pag ...

htmlcss960.gs

Integrating a feature for displaying No Results Found

I am struggling to modify a script for auto-completing search fields. My goal is to include a "No Results Found" option along with a hyperlink when no matching results are found. I'm having difficulty figuring out how to add an else statement to displ ...

javascriptjqueryhtml

What is causing the div element to act as a container?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a1bba3bba5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0v ...

htmlcssbootstrap-4containers

creating a form layout with inline buttons

I have encountered an issue with aligning 2 buttons and a form with input type in a single line. Even though I have tried different approaches, I am unable to achieve the desired inline layout. Here is my current setup: .btn-registerLayout { backgr ...

htmlcsstwitter-bootstrapbootstrap-4