How to make a jQuery UI dialog take up a full window and dynamically resize the window

Question

Currently, I can set the width attribute to auto to take the full width of the window, and it dynamically adjusts itself if the window size changes (for example, resizing browser windows or displaying them on a different screen size). Example: http://jsfiddle.net/NnsN2/

However, I cannot get height to work the same. This will always be the minimum height that will match the content, even if I tried to set it to auto .

The usual way to get the height of the window first ( $(window).height() ) and use it for height does not work here, because it will be static and will not dynamically adapt to window resizing.

How can I make the height always occupy the entire height of the window, and also be able to adapt to resizing the window?

Answer 1

You can try to get the #id or .class element at runtime, and then make the width / height according to the width and height of the window:

 $(window).resize(function () { $('.ui-dialog').css({ 'width': $(window).width(), 'height': $(window).height(), 'left': '0px', 'top':'0px' }); }).resize(); //<---- resizes on page ready 

script check

Answer 2

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 captured its identifier, use the following:

 $("#DlgID").parent().css('height', $(window).height()); 

The actual height is dictated by the parent of your <div> containing the contents of the dialog, hence this link. You can also use this method to control other properties of the parent.

Happy coding!

Answer 3

You can use jquery plugin :

 $("#demo").dialog({ width: 500, height: 300, dialogClass: "dialog-full-mode" /*must to add this class name*/ }); //initiate the plugin $(document).dialogfullmode();