fix(popup): if popup is taller than the window, shrink the popup body and make it scrollable. Closes #1679

Author: perrygovier

Diff for: js/angular/service/popup.js

@@ -317,6 +317,17 @@ function($ionicTemplateLoader, $ionicBackdrop, $q, $timeout, $rootScope, $docume
           //if hidden while waiting for raf, don't show
           if (!self.isShown) return;
 
+          //if the popup is taller than the window, make the popup body scrollable
+          if(self.element[0].offsetHeight > window.innerHeight - 20){
+            self.element[0].style.height = window.innerHeight - 20+'px';
+            popupBody = self.element[0].querySelectorAll('.popup-body');
+            popupHead = self.element[0].querySelectorAll('.popup-head');
+            popupButtons = self.element[0].querySelectorAll('.popup-buttons');
+            self.element.addClass('popup-tall');
+            newHeight = window.innerHeight - popupHead[0].offsetHeight - popupButtons[0].offsetHeight -20;
+            popupBody[0].style.height =  newHeight + 'px';
+          };
+
           self.element.removeClass('popup-hidden');
           self.element.addClass('popup-showing active');
           ionic.DomUtil.centerElementByMarginTwice(self.element[0]);

Diff for: scss/_popup.scss

@@ -36,6 +36,12 @@
     @include animation-timing-function(ease-in-out);
     @include animation-fill-mode(both);
   }
+  &.popup-tall{
+    overflow:hidden;
+    .popup-body{
+      overflow:auto;
+    }
+  }
 }
 
 .popup-head {

Diff for: test/html/popup.html

@@ -18,6 +18,7 @@
       <button class="button button-balanced" ng-click="showPrompt()">Prompt</button>
       <button class="button button-balanced" ng-click="showPasswordPrompt()">Password Prompt</button>
       <button class="button button-positive" ng-click="showAlert()">Alert</button>
+      <button class="button button-positive" ng-click="showTallAlert()">Tall Alert</button>
       <div class="list">
         <a class="item" href="#">Item</a>
         <a class="item" href="#">Item</a>
@@ -145,6 +146,14 @@
                 }, 1000);
               });
           };
+          $scope.showTallAlert = function() {
+            $ionicPopup.alert({
+              title: 'Tall Alert',
+              content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+            }).then(function(res) {
+              console.log('Closed');
+            });
+          };
       });
     </script>
   </body>

Diff for: test/unit/angular/service/popup.unit.js

@@ -108,6 +108,18 @@ describe('$ionicPopup service', function() {
         expect(popup.element.hasClass('active')).toBe(false);
         ionic.requestAnimationFrame = function(cb) { cb(); };
       });
+      it('should shrink .popup-body height so that the popup is never taller than the window', function() {
+        str = 'All work and no play... ';
+        for(var i=0; i<13;i++){
+          str = str + str;
+        }
+        var popup = TestUtil.unwrapPromise($ionicPopup._createPopup({
+          template: str
+        }));
+        popup.show();
+        var windowIsLarger = popup.element[0].offsetHeight < window.innerHeight;
+        expect(windowIsLarger).toBe(true);
+      });
     });
 
     describe('hide', function() {