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!