diff --git a/js/angular/service/popup.js b/js/angular/service/popup.js index 2b13a82734..560cdd34c0 100644 --- 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 index f2ce6fb050..10a66bab46 100644 --- 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 index 615bd4ed3c..8a52417167 100644 --- a/test/html/popup.html +++ b/test/html/popup.html @@ -18,6 +18,7 @@ +
Item Item @@ -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'); + }); + }; }); diff --git a/test/unit/angular/service/popup.unit.js b/test/unit/angular/service/popup.unit.js index 0936558367..9d2911d5c9 100644 --- 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() {