fix(popup): if popup is taller than the window, shrink the popup body…

… and make it scrollable. Closes #1679
ionic-team · Jun 27, 2014 · 3e6ce18 · 3e6ce18
1 parent f4043e6
commit 3e6ce18
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 0 deletions.
diff --git a/js/angular/service/popup.js b/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 --git a/scss/_popup.scss b/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 --git a/test/html/popup.html b/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 --git a/test/unit/angular/service/popup.unit.js b/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() {