move overflow and max-height on modal to modal-body instead

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index df0a3624a1067e4bc4f47ecd4e975bec0e8a0c07..1437fb70501859bd9f7ffaf7a5eb83d3de3cf0db 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index baf4fde003794f5d02b11f1b2609479aba31c820..9fa129e107fb6d1585d0096b01df72548117470b 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -860,7 +860,6 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
   display: block;
   margin-top: 5px;
   margin-bottom: 0;
-  color: #999999;
 }
 .help-inline {
   display: inline-block;
@@ -2873,7 +2872,6 @@ button.btn.small, input[type="submit"].btn.small {
   top: 50%;
   left: 50%;
   z-index: 1050;
-  max-height: 500px;
   overflow: auto;
   width: 560px;
   margin: -250px 0 0 -280px;
@@ -2912,6 +2910,8 @@ button.btn.small, input[type="submit"].btn.small {
   margin-top: 2px;
 }
 .modal-body {
+  overflow-y: auto;
+  max-height: 400px;
   padding: 15px;
 }
 .modal-body .modal-form {

diff --git a/docs/javascript.html b/docs/javascript.html
index 9edc0e482465ead326b9cf3d4e03d00182e467fd..2cb0c0938766dbaa9066d50e5bad388ea68b1760 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -237,6 +237,17 @@
 
               <h4>Tooltips in a modal</h4>
               <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
+
+              <hr>
+
+              <h4>Overflowing text to show optional scrollbar</h4>
+              <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
+              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
               <a href="#" class="btn btn-primary">Save changes</a>

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 69230aa3c8437747ac8d75ea2fa175d373ea3359..5500b59df7e07c2e6250eb913779fee07ab230a9 100644 (file)
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -161,6 +161,17 @@
 
               <h4>{{_i}}Tooltips in a modal{{/i}}</h4>
               <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
+
+              <hr>
+
+              <h4>{{_i}}Overflowing text to show optional scrollbar{{/i}}</h4>
+              <p>{{_i}}We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.{{/i}}</p>
+              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
               <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>

diff --git a/less/modals.less b/less/modals.less
index d1e06dc2619985a9b71b7148255f007c2c226508..71977307ff87dfcec05af2897c29485cf3b88ed0 100644 (file)
--- a/less/modals.less
+++ b/less/modals.less
@@ -33,7 +33,6 @@
   top: 50%;
   left: 50%;
   z-index: @zindexModal;
-  max-height: 500px;
   overflow: auto;
   width: 560px;
   margin: -250px 0 0 -280px;
@@ -59,6 +58,8 @@
 
 // Body (where all modal content resises)
 .modal-body {
+  overflow-y: auto;
+  max-height: 400px;
   padding: 15px;
 }
 // Remove bottom margin if need be