I am using Bootstrap 3 and have a list of subjects inside a side nav. The sidenav is long and I would like to make it that there is a scrollbar inside of the sidenav that displays 8 elements before having to scroll down.
Here is my code below:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="float:left">
<div class="well sidebar-nav">
<ul class="nav">
<li><strong>Select a subject</strong></li>
<li class="active"><a href="#">Maths</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Art and Design</a></li>
<li><a href="#">Drama</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Physics</a></li>
<li><a href="#">Chemistry</a></li>
<li><a href="#">Biology</a></li>
<li><a href="#">Home economics</a></li>
<li><a href="#">Physical Education</a></li>
<li><a href="#">Computing Science</a></li>
<li><a href="#">French</a></li>
<li><a href="#">German</a></li>
<li><a href="#">Mandarin</a></li>
<li><a href="#">Religious Education</a></li>
<li><a href="#">Modern Studies</a></li>
<li><a href="#">Geography</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Creative computing</a></li>
<li><a href="#">Craft, Design and Technology</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->
This question is related to
javascript
html
twitter-bootstrap
twitter-bootstrap-3
You need to use the overflow option, but with the following parameters:
.nav {
max-height:300px;
overflow-y:auto;
}
Use overflow-y:auto; so the scrollbar only appears when the content exceeds the maximum height.
If you use overflow-y:scroll, the scrollbar will always be visible - on all .nav - regardless if the content exceeds the maximum heigh or not.
Presumably you want something that adapts itself to the content rather then the the opposite.
Hope it may helpful
Source: Stackoverflow.com