Merge pull request #64 from DaleCam/Fix-Issue-61

Add scrollable property to modal

docs/index.html

@@ -2845,6 +2845,10 @@ Optional suffix of modal window class. The value used is appended to the <code>m
 (<i>Note: Since this is directly injected into the class for the modal, you can leverage additional Bootstrap modal classes, such as <code>modal-dialog-centered</code>.
 Ex: <code>md modal-dialog-centered</code>.</i>)</p>
 </li>
+<li><p><code>scrollable</code>
+  <em>(Type: <code>boolean</code>, Default: <code>false</code>)</em> -
+  Indicates whether the dialog will allow its content to scroll. If set to true, this will add the class 'modal-dialog-scrollable' to the rendered modal. </p>
+</li>
 <li><p><code>template</code>
 <em>(Type: <code>string</code>)</em> -
 Inline template representing the modal&#39;s content.</p>

src/modal/modal.js

@@ -102,6 +102,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
       link: function(scope, element, attrs) {
         element.addClass(attrs.windowTopClass || '');
         scope.size = attrs.size;
+        scope.scrollable = attrs.scrollable === 'true';
 
         scope.close = function(evt) {
           var modal = $modalStack.getTop();
@@ -425,7 +426,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
           openedClass: modal.openedClass,
           windowTopClass: modal.windowTopClass,
           animation: modal.animation,
-          appendTo: modal.appendTo
+          appendTo: modal.appendTo,
+          scrollable: modal.scrollable
         });
 
         openedClasses.put(modalBodyClass, modalInstance);
@@ -484,6 +486,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
           'aria-labelledby': modal.ariaLabelledBy,
           'aria-describedby': modal.ariaDescribedBy,
           'size': modal.size,
+          'scrollable': modal.scrollable,
           'index': topModalIndex,
           'animate': 'animate',
           'ng-style': '{\'z-index\': 1050 + $$topModalIndex*10, display: \'block\'}',
@@ -665,7 +668,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
       options: {
         animation: true,
         backdrop: true, //can also be false or 'static'
-        keyboard: true
+        keyboard: true,
+        scrollable: false
       },
       $get: ['$rootScope', '$q', '$document', '$templateRequest', '$controller', '$uibResolve', '$uibModalStack',
         function ($rootScope, $q, $document, $templateRequest, $controller, $uibResolve, $modalStack) {
@@ -763,6 +767,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.multiMap', 'ui.bootstrap.sta
                   ariaLabelledBy: modalOptions.ariaLabelledBy,
                   ariaDescribedBy: modalOptions.ariaDescribedBy,
                   size: modalOptions.size,
+                  scrollable: modalOptions.scrollable,
                   openedClass: modalOptions.openedClass,
                   appendTo: modalOptions.appendTo
                 };

src/modal/test/modal.spec.js

@@ -1389,6 +1389,29 @@ describe('$uibModal', function() {
       });
     });
 
+    describe('scrollable', function() {
+      it('should default to false', function() {
+        open({
+          template: '<div>Non scollable modal dialog</div>'
+        });
+        
+        expect($document.find('div.modal-dialog')).not.toHaveClass('modal-dialog-scrollable');
+      });
+      it('should add the scrollable class if scrollable set to true', function() {
+        open({
+          template: '<div>Large modal dialog</div>',
+          scrollable: true
+        });
+
+        expect($document.find('div.modal-dialog')).toHaveClass('modal-dialog-scrollable');
+      });
+      it('should allow overriding default options in a provider', function() {
+        $uibModalProvider.options.scrollable = true;
+        open({template: '<div>Content</div>'});
+        expect($document.find('div.modal-dialog')).toHaveClass('modal-dialog-scrollable');
+      });
+    });
+
     describe('animation', function() {
       it('should have animation fade classes by default', function() {
         open({

template/modal/window.html

@@ -1 +1 @@
-<div class="modal-dialog {{size ? 'modal-' + size : ''}}"><div class="modal-content" uib-modal-transclude></div></div>
+<div class="modal-dialog {{size ? 'modal-' + size : ''}} {{scrollable ? 'modal-dialog-scrollable': ''}}"><div class="modal-content" uib-modal-transclude></div></div>