How to make jQuery UI dialog occupy full window and dynamically adjust to window size change?
You can try to get the element's #id
or .class
at runtime and then make the width/Height according to the window width and height:
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width(),
'height': $(window).height(),
'left': '0px',
'top':'0px'
});
}).resize(); //<---- resizes on page ready
checkout in fiddle
Here is how I was able to "solve" this problem for jQuery UI Ver 1.8.17:
After the dialogue has been opened, and assuming that you have captured its id, use the following:
$("#DlgID").parent().css('height', $(window).height());
The actual height is dictated by the parent of your <div>
containing the dialogue content, hence the reference. You can also use this method to control other properties of the parent.
Happy coding!