I'm encountering an issue with displaying 3 Bootstrap columns in the ContentArea. Even though I can locate them using Developer tools, they seem to be positioned at the bottom of the ContentArea, making them not visible. I've attempted adjusting the top attribute and margin-top attribute, but I'm unable to successfully move the columns up into view within the ContentArea.
Could someone please help me identify where I might be going wrong?
$(document).ready(function () {
$('#menu-toggle').toggleClass('menu-hidden');
$('#menu-toggle').on('click', function () {
//alert();
$('#SidebarWrapper').toggleClass('menu-hidden');
$('#ContentArea').toggleClass('content-grew');
$('#SubCategories').toggleClass('slide-left');
});
});body {
}
#TheLayoutContainer {
position:fixed;
z-index:1000;
width:100%;
height:100%;
border:1px solid black;
background-color:pink;
left:0px;
}
#menu-toggle {
}
#SidebarWrapper {
width:200px;
height:100%;
margin-top:0;
margin-left:0;
position:fixed;
z-index:2000;
background-color:black;
transition:1s;
}
#SidebarWrapper.menu-hidden {
width:50px;
transition:1s;
}
#ContentArea {
position: relative;
height: 100%;
background-color: purple;
z-index: 2000;
left: 325px;
margin-top:0px;
transition:1s;
padding-right:20px;
}
#ContentArea #SubCategories {
margin-left:-125px;
width:125px;
height:100%;
border:1px solid #72cad3;
background-color:#72cad3;
}
#SubCategories.slide-left {
margin-left:-75px;
width:125px;
height:100%;
border:1px solid #72cad3;
background-color:#72cad3;
}
#ContentArea.content-grew {
height: 100%;
left: 175px;
transition:1s;
}
#HeaderControlMenu {
height:45px;
width:100%;
background-color:yellow;
top:0px;
position:fixed;
z-index:2000;
left:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div id="HeaderControlMenu">
<button id="menu-toggle" class="btn btn-success">Click</button>
</div>
</div>
<div id="TheLayoutContainer">
<div id="SidebarWrapper">
</div>
<div id="ContentArea">
<div id="SubCategories">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">A</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">B</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">C</div>
</div>
</div>
</div>