JQuery Mobile popup content height exceeds window height
The jQuery Mobile popup options are limited by having 15px left-right margin and 30px top and bottom margin . If the content is too large for these limits, then the popup will grow longer (not wider), so the entire page must be scrolled to see the popup content.
I need to change this behavior in such a way that the dimensions of the popups never exceed the height of the window and that the content scrolls vertically inside the popup.
You can limit the size of the popup:
$('#popup').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 30
$('#popup').css('max-height', maxHeight + 'px')
}
})
... but the popup remains the same, passing the bottom of the popup and still causing the user to scroll through the page, not the content inside the popup.
How do I allow popup content to scroll vertically inside the popup?
source to share
You must use:
$('#popup').css('overflow-y', 'scroll');
Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/
Final Notes
If you'd like to learn more about how to customize your jQuery Mobile page and widgets, take a look at this article . It comes with a lot of working examples, including why this is important for jQuery Mobile.
source to share