Edward Tanguay Edward Tanguay - 18 days ago 8
CSS Question

How to make long Bootstrap dropdown menus vertically scrollable?

I got the following responsive site to work the way I want it on all devices. The only remaining problem is to make the drop down menu scrollable so that when the number of options in the dropdown menu is more than can fit on the device's screen, there is a way to scroll it.

These dropdown menus used to scroll during development of this as in this example (http://tanguay.info/testmenu2). But since I needed to add fixed heights etc. to get this design the way it is, it has many these these dropdown menus unscrollable. How can I get this scrollable functionality back while keeping the current functionality of the site, i.e. with footer that stays in place?

Here is how it looks in Smartphone and Computer views:

Smartphone:
enter image description here

Computer:
enter image description here

You can view this test site here: http://tanguay.info/testmenu

You can download the code here: http://tanguay.info/testmenu/testmenu.zip

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_custom_extensions.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_override.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/system_navbarResponsiveSite.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/system_reset.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/system_developer.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/system_main.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/custom_main.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/font-awesome.css">
<link rel="stylesheet" type="text/css" href="index_fichiers/lt.css">
<script src="index_fichiers/jquery-2.js"></script>
<script src="index_fichiers/bootstrap.js"></script>
<script src="index_fichiers/qtools.js"></script>
<script src="index_fichiers/system_main.js"></script>
<script src="index_fichiers/angular.js"></script>
<style type="text/css">
/* page-level CSS */
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<div class="navHeaderArea">
<div class="theUser" onclick="location.href = '?';">The Test Site</div>
<div class="clear"></div>
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown pull-right active">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">MENU</a>
<ul class="dropdown-menu">
<li><a href="#">Test Page #1</a></li>
<li><a href="#">Test Page #2</a></li>
<li><a href="#">Test Page #3</a></li>
<li><a href="#">Test Page #4</a></li>
<li><a href="#">Test Page #5</a></li>
<li><a href="#">Test Page #6</a></li>
<li><a href="#">Test Page #7</a></li>
<li><a href="#">Test Page #8</a></li>
<li><a href="#">Test Page #9</a></li>
<li><a href="#">Test Page #10</a></li>
<li><a href="#">Test Page #11</a></li>
<li><a href="#">Test Page #12</a></li>
<li><a href="#">Test Page #13</a></li>
<li><a href="#">Test Page #14</a></li>
<li><a href="#">Test Page #15</a></li>
<li><a href="#">Test Page #16</a></li>
<li><a href="#">Test Page #17</a></li>
<li><a href="#">Test Page #18</a></li>
<li><a href="#">Test Page #19</a></li>
<li><a href="#">Test Page #20</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="pageContent"><div ng-app="mainModule" ng-controller="mainController" class="angular-hide-during-page-load ng-scope">
<h1 class="showcaseTitle">Test Page</h1>
<div class="showcaseDescription">This is a test page that shows how the menu extends to far past the bottom of the screen.</div>
<div class="panel panel-primary">
<div class="panel-heading ng-binding">Input Text</div>
<div class="panel-body">

<div>line #0</div><div>line #1</div><div>line #2</div><div>line #3</div><div>line #4</div><div>line #5</div><div>line #6</div><div>line #7</div><div>line #8</div><div>line #9</div><div>line #10</div><div>line #11</div><div>line #12</div><div>line #13</div><div>line #14</div><div>line #15</div><div>line #16</div><div>line #17</div><div>line #18</div><div>line #19</div><div>line #20</div><div>line #21</div><div>line #22</div><div>line #23</div><div>line #24</div><div>line #25</div><div>line #26</div><div>line #27</div><div>line #28</div><div>line #29</div><div>line #30</div><div>line #31</div><div>line #32</div><div>line #33</div><div>line #34</div><div>line #35</div><div>line #36</div><div>line #37</div><div>line #38</div><div>line #39</div><div>line #40</div><div>line #41</div><div>line #42</div><div>line #43</div><div>line #44</div><div>line #45</div><div>line #46</div><div>line #47</div><div>line #48</div><div>line #49</div><div>line #50</div><div>line #51</div><div>line #52</div><div>line #53</div><div>line #54</div><div>line #55</div><div>line #56</div><div>line #57</div><div>line #58</div><div>line #59</div><div>line #60</div><div>line #61</div><div>line #62</div><div>line #63</div><div>line #64</div><div>line #65</div><div>line #66</div><div>line #67</div><div>line #68</div><div>line #69</div><div>line #70</div><div>line #71</div><div>line #72</div><div>line #73</div><div>line #74</div><div>line #75</div><div>line #76</div><div>line #77</div><div>line #78</div><div>line #79</div><div>line #80</div><div>line #81</div><div>line #82</div><div>line #83</div><div>line #84</div><div>line #85</div><div>line #86</div><div>line #87</div><div>line #88</div><div>line #89</div><div>line #90</div><div>line #91</div><div>line #92</div><div>line #93</div><div>line #94</div><div>line #95</div><div>line #96</div><div>line #97</div><div>line #98</div><div>line #99</div><div>line #100</div>
</div>
</div>
</div>
</div>
<div class="pageFooter">
<div class="page_Footer_left">The Footer</div>
<div class="page_Footer_right">
</div>
</div>
</div>
</body>
</html>

Answer

You can do this by specifying max-height and overflow-y on the dropdown:

.dropdown-menu{
    max-height: 400px;
    overflow-y: auto;
}

You can calculate the max-height in JS or use viewport units. For example, if you want your dropdown to fill the space up until the bottom of the page, you could use: max-height: calc(100vh - 50px), where 50px is the height of your header.

Note that in the above solution the list on the left will not be scrolled independently of the dropdown. Once you reach the end of the dropdown, it will continue scrolling the list. To prevent this, make the panel overflow as well:

.panel.panel-primary{
    max-height: 60vh;
    overflow-y: auto;
}

Again, it depends on your use case on how to go about to calculate the max heights.