How to synchronize side-panel height to dynamic height? - html

Question

My side-panel height is not expanding when my div content's get bigger. I've given the height to 100% it's working fine for mobile view but for the desktop view, sometimes my sidebar's height is not increasing as it's fixed. But I want this height to be dynamic with content of my div. This is my whole code : JSFiddle
Here you can see, if you click the navbar, it's open the bar, and down below you will see side-bar and div content are not in the same height. This is the problem I'm getting :
I want side bar to expand. How can I resolve this? All I can say that I've to change this css class's height but how ?:
.sidepanel {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
left: 0;
background-color: #221F20;
overflow-x: hidden;
padding-top: 40px;
transition: 0.3s;
}

Answer 1

if you add position: relative to your body, your problem should be solved.
$(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" >
<i class="fa fa-align-left" style="color: #000;"></i>
<p>
user
</p>
</div>
<div class="sidepanel">
<!-- General panel -->
<i class="fas fa-file-alt sidepanel-icon"></i> General
</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

position should be fixed.
top 0 property solved the space issue.
added toggle inside the nav to toggle it when it opens, you only need to restyle the toggle that is inside the nav if you wish.
.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" >
<i class="fa fa-align-left" style="color: #000;"></i>
<p>
user
</p>
</div>
<div class="sidepanel">
<i class="fa fa-align-left" style="color: #000;"></i>
<!-- General panel -->
<i class="fas fa-file-alt sidepanel-icon"></i> General
</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>