How to check if jQM popup is appropriate for user viewport?
So, I was able to add scrollbars to jQM big popups usingcss('overflow-y', 'scroll')
. But how to do this only when the popup is larger than the user's viewport?
I'm trying to use the jquery-visible plugin , but I can't seem to get it to respond:
http://jsfiddle.net/mmRnq/124/
$('#test-button').on('click', function(e) {
$('#confirmDialog').popup('open');
// https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport
if(!$('#confirmDialog').visible(true)) {
alert('Popup not fully visible - add overflow scrolling');
$('#confirmDialog').css('overflow-y', 'scroll');
}
});
+1
source to share
1 answer
you can use
overflow-y: auto
This makes the scroll bar visible only when needed.
Updated FIDDLE
UPDATE:
You can also just make the content of the popup scrollable to keep the title in view:
#confirmDialog .ui-content {
overflow-y: auto;
}
$('#confirmDialog').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 120;
$('#confirmDialog .ui-content').height(maxHeight);
}
});
+3
source to share