What is the best way to adjust the height of a side-panel to match the dynamic

I'm facing an issue where my side-panel height is not expanding along with the content of the div. While specifying a height of 100% works well for mobile view, I encounter problems in desktop view as the sidebar's height remains fixed. I want the height to adjust dynamically based on the div's content. You can find my complete code on JSFiddle.

If you click on the navbar, you'll notice that the side-bar and div content are not aligned in terms of height as shown in the following image: https://i.sstatic.net/oImHq.png

Can anyone guide me on how to resolve this issue? It seems like I need to modify the height property of the CSS class, but I'm unsure how to do so:

.sidepanel {
    height: 100%; 
    width: 0; 
    position: absolute; 
    z-index: 1;
    left: 0;
    background-color: #221F20; 
    overflow-x: hidden; 
    padding-top: 40px; 
    transition: 0.3s;
}
htmlcssbootstrap-4css-position

Answer №1

By applying the CSS rule position: relative to your body element, you can resolve the issue at hand.

$(document).ready(function() {
    //sidepanel navigation
    $(".toggleButton").on("click", function() {
        if ($(".sidepanel").css("width") == "0px") {
            var mainWidth = $("#main").width() - 256;
            $(".sidepanel").css("width", `15%`);
            $("#main").css("margin-left", `15%`);
            $("#main").css("width", `85%`);
        } else {
            $(".sidepanel").css("width", "0%");
            $("#main").css("margin-left", "0%");
            $("#main").css("width", "100%");
        }
    });

    //menu item navigation
    $(".menuItem").on("click", function() {

        // if this menuitem is collapsed
        if ($(this).next().css("height") == "0px") {

            // turning off all other menu items except for this
            $(".menuItem").not($(this)).next("div").css("height", "0px");
            $(".menuItem").not($(this)).removeClass("openAnchor");
            $(".menuItem").not($(this)).addClass("collapsedAnchor");

            // turning off all sub menu items except for this
            $(".subMenuItem").next("div").css("height", "0px");
            $(".subMenuItem").removeClass("openAnchor");
            $(".subMenuItem").addClass("collapsedAnchor");


            // substituting collapsed class for open class
            $(this).removeClass("collapsedAnchor");
            $(this).addClass("openAnchor");


            var numberOfChildren = $(this).next("div").find("> a").length;
            var height = 37 * numberOfChildren;
            $(this).next("div").css("height", `${height}px`);

        } else {
            $(this).removeClass("openAnchor");
            $(this).addClass("collapsedAnchor");
            $(this).next("div").css("height", "0px");
        }
    });

    // sub menu item navigation
    $(".subMenuItem").on("click", function() {

        // if this menuitem is collapsed
        if ($(this).next().css("height") == "0px") {

            // accesing sibling open anchor
            var openAnchorChildNumber = $(this).parent().find(".openAnchor").first().next("div").find("> a").length;
            var heightToDeduce = 37 * openAnchorChildNumber;
            console.log(heightToDeduce);
            // turning off all other sub menu items except for this
            $(".subMenuItem").not($(this)).next("div").css("height", "0px");
            $(".subMenuItem").not($(this)).removeClass("openAnchor");
            $(".subMenuItem").not($(this)).addClass("collapsedAnchor");


            // substituting collapsed class for open class
            $(this).removeClass("collapsedAnchor");
            $(this).addClass("openAnchor");


            var numberOfChildren = $(this).next("div").find("> a").length;
            var height = 37 * numberOfChildren;
            $(this).next("div").css("height", `${height}px`);
            var parentHeight = $(this).parent().height() + height - heightToDeduce;
            $(this).parent().css("height", `${parentHeight}px`);


        } else {
            $(this).removeClass("openAnchor");
            $(this).addClass("collapsedAnchor");
            $(this).next("div").css("height", "0px");
            var numberOfChildren = $(this).next("div").find("> a").length;
            var height = 37 * numberOfChildren;
            var parentHeight = $(this).parent().height() - height;
            $(this).parent().css("height", `${parentHeight}px`);
        }
    });

});
body {
  position: relative;
}

/* The sidepanel menu */
.sidepanel {
    height: 100%; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: absolute; /* Stay in place */
    z-index: 1;
    left: 0;
    background-color: #221F20; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 40px; /* Place content 60px from the top */
    transition: 0.3s;
}

.sidepanel .collapsedAnchor::after {
    font-family: 'Font Awesome 5 Free';
    float: right;
    font-weight: 900;
    content: "\f054";
}
.sidepanel .openAnchor::after {
    font-family: 'Font Awesome 5 Free';
    float: right;
    font-weight: 900;
    content: "\f078";
}

/* The sidepanel links */
.sidepanel a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #B7B6B8;
    display: block;
    transition: 0.3s;
    font-size: 13px;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
    color: #FFFFFF;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

a.menuItem i.fa{
    font-size: 15px;
}

#main {
    transition: margin-left 0.5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

.sidepanel .subMenus {
    padding-left: 3%;
    /* position: fixed; */
    overflow-y: hidden;
    transition: 0.5s;
}

.subMenus a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    font-size: 13px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="navbar" >

        <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>
        <p>
        user
        </p>

    </div>
 <div class="sidepanel">
    
    <!-- General panel -->
    <a href="#"><i class="fas fa-file-alt sidepanel-icon"></i>  General</a>

</div>

<div class="container-fluid px-5 mt-2" id="main">

    <div class="row py-4">
        <div class="col-md-6 page-title-div">
            <div class="page-header">
                  <h2>HTML</h2>
            </div>
        </div>
    </div>

    <div class="row card py-4 rounded">


        <div class="col-md-6 page-title-div">
            <div>
                  <p>In HTML, there are two main types of lists:
                    unordered lists (<ul>) - the list items are marked with bullets
                    ordered lists (<ol>) - the list items are marked with numbers or letters
                    The CSS list properties allow you to:
                    
                    Set different list item markers for ordered lists
                    Set different list item markers for unordered lists
                    Set an image as the list item marker
                    Add background colors to lists and list items
                    </p>
            </div>
        </div>


    </div>

</div>

Answer №2

Ensuring the position is fixed.

The issue with space was resolved by setting the top property to 0.

A toggle was added inside the navigation to enable toggling when it opens, and if desired, only the styling of the toggle within the navigation needs to be adjusted.

.sidepanel {
    height: 100%;
    top: 0;
    width: 0;
    position: fixed;
    z-index: 9999;
    left: 0;
    background-color: #221F20;
    overflow-x: hidden;
    padding-top: 40px;
    transition: 0.3s;
}



<div class="navbar">

    <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>
    <p>
        user
    </p>

</div>
<div class="sidepanel">
    <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>
    <!-- General panel -->
    <a href="#"><i class="fas fa-file-alt sidepanel-icon"></i>  General</a>

</div>

<div class="container-fluid px-5 mt-2" id="main">

    <div class="row py-4">
        <div class="col-md-6 page-title-div">
            <div class="page-header">
                  <h2>HTML</h2>
            </div>
        </div>
    </div>

    <div class="row card py-4 rounded">


        <div class="col-md-6 page-title-div">
            <div>
                <p>In HTML, there are two main types of lists:
                    unordered lists (<ul>) - the list items are marked with bullets
                    ordered lists (<ol>) - the list items are marked with numbers or letters
                    The CSS list properties allow you to:

                    Set different list item markers for ordered lists
                    Set different list item markers for unordered lists
                    Set an image as the list item marker
                    Add background colors to lists and list items
                </p>
            </div>
        </div>


    </div>

</div>

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

Tips for looping through a table and opening the tab that meets a specific criterion

I am looking to cycle through a table in order to extract the values of "GST Invoice No." and access the "View Invoice" section for only those invoices whose third digit is a 2. from selenium import webdriver from selenium.webdriver.common.by import By fro ...

pythonhtmlseleniumselenium-webdriver

Embedding a table row within an anchor element in Angular 4

Currently, I am facing an issue with a table that contains [routerLink] on each <tr>. This setup is preventing the "open link in a new tab" option from appearing when I right-click because there is no <a> tag. I attempted to enclose the table r ...

htmlcssangular

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...

javascripthtmlcssbootstrap-4laravel-5.8

Styling targeted div class elements with specific input elements

I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...

htmlcss

Sliding Toggle: Panel Revealed with Button Slide

Currently, I am working on implementing a jquery slide tab feature. The functionality is working fine on button click. However, I want the button to stick with the panel and slide along with it. At the moment, the button remains fixed while the panel slide ...

javascriptjqueryhtmlcss

The issue of duplicate backgrounds appearing on the burger menu when adjusting the height

There seems to be an issue with my burgermenu; when I attempt to adjust the height, the background-color ends up duplicating. .bm-menu { background-color: rgba(255, 255, 255, 0.9); height: 60vh; position: fixed; transition: top 0.3s; to ...

cssreactjsduplicates

Tips for styling row headers in Vaadin with CSS

I am in need of assistance with a problem I am facing. Recently, I started learning the Vaadin framework and I am trying to apply CSS to the row headers (first cell of each row), but so far I have not had any success. Below is the code that I have been usi ...

javacssvaadin7

Issue with the pluses and minuses in the Bootstrap accordion

Can someone explain why the panel-header displays all "-" instead of "+"? When I click on the panel, it changes all "-" to "+". This happens consistently, not just the first time the page loads. My CSS code: .panel-heading a:after { font-family: &ap ...

htmlcsstwitter-bootstrap-3

What is the reason behind the error message in Bokeh?

While following a Udemy tutorial, I encountered the following error message associated with Bokeh: Bokeh Error attempted to retrieve property value for property without value specification when running the code provided in the HTML. Can anyone shed some l ...

htmlpropertiesmodelsbokeh

The rectangular shape extending beyond the boundaries of the canvas

I'm currently working on creating a rectangle within a canvas element. I've set the width of the div to match the width of the rectangle, but unfortunately, the rectangle is extending beyond the left side of the canvas container. My goal is to co ...

javascripthtmlcssreactjscanvas

Exploring the use of color in text embellishments

Is it possible to change the color of the underline on text when hovering, while keeping it different from the text color? I have successfully achieved this in Firefox using the property "-moz-text-decoration-color". However, this does not work in other m ...

htmlcss

While attempting to scrape data, the console.log function displays the information, however it is not being returned

This code is now working perfectly! However, I am struggling to organize the data into an array of separate objects. getGAS: function(url) { var self=this; rp(options) .then(($) => { let gasset = []; $('.stations-list').each(functio ...

javascripthtmlnode.jsaxioscheerio

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

jqueryhtmlcssdatatable

AngularJS HTTP POST request encountering issue with success function not functioning as expected

I am currently working on implementing a basic HTTP post request to insert data into my database. The following pages are involved: register.php contains the registration form. maincons.js houses the application controllers. sqlregister.php include ...

javascriptphphtmlangularjs

Overlay with a progress bar that obscures visibility

I'm dealing with a progress bar that needs to be displayed on top of an overlay. If you take a look at this jsfiddle, you can see the issue. Here's the markup: <div class="overlay mouse-events-off"> <div class="progress progress-st ...

csstwitter-bootstrap

Responsive CSS Dropdown Menu - Divided into Two Columns

After searching for solutions in the support resources and experimenting with various techniques, I am struggling to divide this CSS Dropdown menu into two columns. The nav list is long enough that it extends below the fold. Although the menu adapts respo ...

jqueryhtmlcssdrop-down-menuresponsive-design

Moving from the end to the beginning with a jQuery slider transition

Instead of relying on external plugins, I built this slider from scratch: function customSlider(selector, interval, index) { var slider = this; this.ind = index; this.selector = selector; this.slides = []; this.activeSlide = 0; this.amount; ...

javascriptjqueryhtml

Is it possible to display a div when hovering over it and have it remain visible until

How can I make the div ".socialIconsShow" fade in when hovering over ".socialIcons", and then fade out when hovering over ".socialIconsShow"? Is there a way to keep the icons visible even after leaving ".socialIcons"? <div class="socialNetworks"> ...

jquerycsscss-sprites

Expand a list item to full width based on the number of items present

Is there a way to make dynamically added list items in a footer stretch across the width of their container? The footer is created in WordPress and the list items are actually widgets. Here is an example: Fiddle I can't manually set the width for e ...

htmlcsswordpresslistwidget

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

javascriptphphtmlcss