When a button in the navbar is clicked, a div appears with a height that exceeds the viewport/page size. How can I enable scrolling for the entire page when this happens?
I attempted to use overflow: scroll, but it only applied scrolling to the internal div displayed upon button click. Is there a way to make the entire page scroll instead? Any suggestions on how to achieve this?
You can view an example on Plunker here: https://plnkr.co/edit/JzGCix39dSd1q7KOiNTc?p=preview
Here is the code snippet:
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" id="showKoo" onclick="showKoo()">Tool bar</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="mainBorder topcorner complete_width complete_height" id="box" style="display: block; background-color:red">
<h4> SOME CONTENT</h4>
</div>
</body>
CSS:
body{
overflow: scroll;
}
.centered_div{
margin: 0 auto;
}
.mainBorder{
border: 1px #B2B9BA solid;
overflow:scroll;
}
.topcorner{
position:fixed;
top:41px;
right:30px;
}
.complete_width {
min-width: 360px;
max-width: 360px;
}
.complete_height {
min-height:640px;
max-height:640px;
}
JavaScript:
function showKoo() {
$('#box').toggle();
}