#146

src/main/webapp/WEB-INF/view/header.jsp

@@ -23,7 +23,7 @@ ${fe:facetForm()}${fe:mltForm()}${fe:geoForm()}
 			</div>
 		</div>
 	</div>
-	<div class="modal hide fade" id="searchOptions" style="overflow-y:scroll;">
+	<div class="modal hide fade" id="searchOptions">
 		<div class="modal-header">
 			<button type="button" class="close" data-dismiss="modal"
 				aria-hidden="true">&times;</button>

src/main/webapp/WEB-INF/view/index.jsp

@@ -75,7 +75,7 @@
 									key="labels.index_form_option_btn" /></a>
 						</div>
 					</fieldset>
-					<div class="modal hide fade" id="searchOptions" style="overflow-y:scroll;">
+					<div class="modal hide fade" id="searchOptions">
 						<div class="modal-header">
 							<button type="button" class="close" data-dismiss="modal"
 								aria-hidden="true">&times;</button>

src/main/webapp/WEB-INF/view/search.jsp

@@ -22,7 +22,7 @@
 	<div class="container">
 		<div class="row">
 			<div class="span9">
-				<p id="searchOptionMenu" class="ellipsis">
+				<p id="searchOptionMenu">
 					<span>
 						<bean:message key="labels.searchoptions_menu_sort" />
 						<a href="#searchOptions" data-toggle="modal">

src/main/webapp/css/style.css

@@ -20,7 +20,6 @@ h2 {
 
 h3 {
   font-size: 18px;
-  overflow-x: scroll;
 }
 
 .navbar .help-link {
@@ -94,7 +93,7 @@ h3 {
 }
 
 .ellipsis {
-    white-space: normal;
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-text-overflow: ellipsis;
@@ -235,16 +234,22 @@ h3 {
 }
 
 @media (max-width: 767px) and (min-width: 481px){
-	.modal {
-		height: 285px;
-	}
 	.visible-phone {
 		display: none!important;
 	}
 }
 
-@media (max-width: 480px){
-	.modal {
-		height: 420px;
+@media (max-height: 480px){
+	#searchOptions {
+		max-height: 450px;
+        overflow-y:scroll;
 	}
-}
+}
+
+@media (max-height: 390px){
+	#searchOptions {
+		max-height: 300px;
+        overflow-y:scroll;
+	}
+}
+