Fix scrolling inside bootstrap modals

joomla · Feb 17, 2016 · 91f2c71 · 91f2c71
1 parent 3f0cc11
commit 91f2c71
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 3 deletions.
diff --git a/administrator/templates/isis/css/template-rtl.css b/administrator/templates/isis/css/template-rtl.css
@@ -8159,6 +8159,15 @@ body.modal-open {
 .js-pstats-data-details dt {
 	width: 220px;
 }
+@media (max-width: 767px) {
+	.field-media-wrapper .modal .modal-body {
+		padding: 5px 0;
+	}
+}
+.modal-body {
+	-webkit-overflow-scrolling: touch;
+	overflow-y: auto !important;
+}
 .pull-right {
 	float: left;
 }

diff --git a/administrator/templates/isis/css/template.css b/administrator/templates/isis/css/template.css
@@ -8159,3 +8159,12 @@ body.modal-open {
 .js-pstats-data-details dt {
 	width: 220px;
 }
+@media (max-width: 767px) {
+	.field-media-wrapper .modal .modal-body {
+		padding: 5px 0;
+	}
+}
+.modal-body {
+	-webkit-overflow-scrolling: touch;
+	overflow-y: auto !important;
+}
diff --git a/administrator/templates/isis/less/template.less b/administrator/templates/isis/less/template.less
@@ -368,7 +368,7 @@ body .navbar-fixed-top {
 	z-index: 100;
 }
 @media (max-width: 767px) {
-	/* Fix ios scrolling inside boottrap modals */
+	/* Fix ios scrolling inside bootstrap modals */
 	body {
 		-webkit-overflow-scrolling: touch;
 	}
@@ -1296,7 +1296,7 @@ body.modal-open {
   -ms-overflow-style: none;
 }
 
-/*Corrects the modals padding*/
+/* Corrects the modals padding */
 .field-media-wrapper .modal .modal-body {
 	padding: 5px 10px;
 	overflow: hidden;
@@ -1308,4 +1308,17 @@ body.modal-open {
 }
 .js-pstats-data-details dt {
 	width: 220px;
-}
+}
+
+/* Corrects the media modal padding on small devices */
+@media (max-width: 767px) {
+	.field-media-wrapper .modal .modal-body {
+		padding: 5px 0;
+	}
+}
+
+/* Fix iOS scrolling inside bootstrap modals (using iframe) */
+.modal-body {
+	-webkit-overflow-scrolling: touch;
+	overflow-y: auto !important;
+}
diff --git a/layouts/joomla/modal/main.php b/layouts/joomla/modal/main.php
@@ -57,10 +57,20 @@
  * $('body').addClass('modal-open');
  * $('body').removeClass('modal-open')
  *
+ * Scrolling inside bootstrap modals on small screens (adapt to window viewport and avoid modal off screen).
+ * - max-height on .modal-body  if param height is set but too high for the window viewport height.
+ *                              (147 = modal-header height + modal-footer height + 20px padding top and bottom)
+ * - max-height on .iframe      max-height of the modal-body (deducting the 1% of the padding of the modal-body class)
+ *
  * Specific hack for Bootstrap 2.3.x
  */
 $script[] = "jQuery(document).ready(function($) {";
 $script[] = "   $('#" . $selector . "').on('show', function() {";
+
+// Set max-height on modal-body.
+$script[] = "       var modalBodyHeight = $(window).height()-147;";
+$script[] = "       $('.modal-body').css('max-height', modalBodyHeight);";
+
 $script[] = "       $('body').addClass('modal-open');";
 
 if (isset($params['url']))
@@ -71,6 +81,9 @@
 	$script[] = "       var modalBody = $(this).find('.modal-body');";
 	$script[] = "       modalBody.find('iframe').remove();";
 	$script[] = "       modalBody.prepend('" . trim($iframeHtml) . "');";
+
+	// Set max-height for iframe.
+	$script[] = "       $('.iframe').css('max-height', modalBodyHeight*0.98);";
 }
 
 $script[] = "   }).on('hide', function () {";

diff --git a/templates/protostar/css/template.css b/templates/protostar/css/template.css
@@ -7521,3 +7521,12 @@ body.modal-open {
 .well .chzn-container {
 	max-width: 100%;
 }
+@media (max-width: 767px) {
+	.field-media-wrapper .modal .modal-body {
+		padding: 5px 0;
+	}
+}
+.modal-body {
+	-webkit-overflow-scrolling: touch;
+	overflow-y: auto !important;
+}
diff --git a/templates/protostar/less/template.less b/templates/protostar/less/template.less
@@ -652,3 +652,16 @@ body.modal-open {
 		max-width: 100%;
 	}
 }
+
+/* Corrects the media modal padding on small devices */
+@media (max-width: 767px) {
+	.field-media-wrapper .modal .modal-body {
+		padding: 5px 0;
+	}
+}
+
+/* Fix iOS scrolling inside bootstrap modals (using iframe) */
+.modal-body {
+	-webkit-overflow-scrolling: touch;
+	overflow-y: auto !important;
+}