jQuery Mobile popup content height exceeds window height

Question

The jQuery Mobile popup dimensions are limited to having a 15px margin on the left an right sides, and a 30px margin on the top and bottom. If the content is too large for these constraints, then the popup grows longer (not wider), so that the whole page must be scrolled to view the popup content.

I need to change this behavior such that the popup dimensions never exceed the height of the window, and such that the content scrolls vertically within the popup.

It is possible to limit the size of the popup thusly:

$('#popup').on({
  popupbeforeposition: function() {
    var maxHeight = $(window).height() - 30
    $('#popup').css('max-height', maxHeight + 'px')
  }
})

...but the popup content is the same, passing the bottom of the popup and still forcing the user to scroll the page, rather than the content within the popup.

How do I allow the popup content to scroll vertically within the popup?

Answer 1

You should use:

$('#popup').css('overflow-y', 'scroll');    

Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/

Final notes

If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.