In the image below, you can see that the scrollable TreeView in the sidebar is not functioning properly. Additionally, I need to have a fixed footer for this sidebar that remains in place when users scroll through the content. How can I resolve this? https://i.sstatic.net/xym5L.jpg
My desired structure is as follows: https://i.sstatic.net/lv8QQ.jpg
.html
<div class="container-fluid max-height no-overflow">
<div class ="row max-height">
<form runat="server">
<!--SIDEBAR-->
<div class="col-sm-3 sidebar">
<div class="panel-body scrollable">
TREEVIEW HERE
</div>
<div class="panel-footer center-block">
BUTTON HERE
</div>
</div>
<!--MAIN CONTENT-->
<div class="col-sm-offset-3 main scrollable">
MAIN CONTENT HERE
</div>
</form>
</div>
</div>
</div>
css:
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: auto;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
}
}
.main {
padding-top: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 20px;
padding-left: 20px;
}
}
.panel-body{
overflow: auto;
}
.panel-footer{
background-color:#ff6a00;
}