How to make jQuery UI dialog occupy full window and dynamically adjust to window size change?

Question

At the moment, I can set width attribute to auto to take the full width of the window, and it dynamically adjust itself if the window size is being changed (e.g. re-sizing the browser windows or displaying it on a different screen size). Example: http://jsfiddle.net/NnsN2/

However, I can't get the height to work the same. It will always be the minimum height that will fit the content, even though I've tried setting it to auto.

The usual approach of getting the window height first ($(window).height()) and use that for height doesn't work here, because it will be static and will not dynamically adapt to change of window size.

How can I make the height always take the full height of the window as well as be able to adapt itself to window size change?

Answer 1

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