Scrollbars on dropdown menus that are too long

sushain97 · Mar 8, 2015 · 5dc2cd9 · 5dc2cd9
1 parent 2fe7179
commit 5dc2cd9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/war/html/pages/dataScores.html b/war/html/pages/dataScores.html
@@ -60,6 +60,17 @@
 		.navbar-fixed-top { margin-bottom: 0px; }
 		body { padding-top: 50px; }
 		#end
+
+		.scrollingDropdown {
+			height: auto;
+			max-height: 400px;
+			overflow-x: hidden;
+			-webkit-overflow-scrolling: touch;
+			-moz-overflow-scrolling: touch;
+			-ms-overflow-scrolling: touch;
+			-o-overflow-scrolling: touch;
+			overflow-scrolling: touch;
+		}
 	</style>
 	<link type="text/css" href="/css/footer.css" rel="stylesheet">
 	<link type="text/css" href="/css/sticky-sidebar.css" rel="stylesheet">
@@ -111,7 +122,7 @@
 									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
 										Qualifying Students<b class="caret"></b>
 									</a>
-									<ul class="dropdown-menu">
+									<ul class="dropdown-menu scrollingDropdown">
 										#foreach($schoolName in $schools[$level])
 											<li data-type="qualifying_$schoolName$LEVEL" id="qualifying_$schoolName.hashCode()">
 												<a href='/data/scores?type=qualifying_$esc.url($schoolName)&level=$level'>$schoolName</a>
@@ -127,7 +138,7 @@
 									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
 										Schools<b class="caret"></b>
 									</a>
-									<ul class="dropdown-menu">
+									<ul class="dropdown-menu scrollingDropdown">
 										#foreach($schoolName in $schools[$level])
 											<li data-type="school_$schoolName$LEVEL" id="school_$schoolName.hashCode()">
 												<a href='/data/scores?type=school_$esc.url($schoolName)&level=$level'>$schoolName</a>

diff --git a/war/html/pages/publicResults.html b/war/html/pages/publicResults.html
@@ -53,6 +53,17 @@
 				background-color: white;
 			}
 		}
+
+		.scrollingDropdownMenu {
+			height: auto;
+			max-height: 400px;
+			overflow-x: hidden;
+			-webkit-overflow-scrolling: touch;
+			-moz-overflow-scrolling: touch;
+			-ms-overflow-scrolling: touch;
+			-o-overflow-scrolling: touch;
+			overflow-scrolling: touch;
+		}
 	</style>
 	<link type="text/css" href="/css/footer.css" rel="stylesheet">
 	<link type="text/css" href="/css/sticky-sidebar.css" rel="stylesheet">
@@ -84,7 +95,7 @@
 									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
 										Qualifying Students<b class="caret"></b>
 									</a>
-									<ul class="dropdown-menu">
+									<ul class="dropdown-menu scrollingDropdownMenu">
 										#foreach($schoolName in $schools[$level])
 											<li data-type="qualifying_$schoolName$LEVEL" id="qualifying_$schoolName.hashCode()">
 												<a href='/contestResults?type=qualifying_$esc.url($schoolName)&level=$level'>$schoolName</a>