diff --git a/js/angular/service/popup.js b/js/angular/service/popup.js index 2b13a82734b..560cdd34c09 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 f2ce6fb0509..10a66bab466 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 615bd4ed3cf..8a524171671 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 09365583673..9d2911d5c9e 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() {