10

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?

Luke Girvin
  • 13,221
  • 9
  • 64
  • 84
skyork
  • 7,113
  • 18
  • 63
  • 103
  • so you want the dialog to cover the whole window? – Alnitak May 31 '13 at 10:55
  • @Alnitak, yes, covers the whole window and automatically resizes itself when window size changes. – skyork May 31 '13 at 10:56
  • 2
    it seems to me then that a jQuery UI dialog is probably not the right control for the job... – Alnitak May 31 '13 at 10:59
  • @Alnitak, so what would be the right tool for the job? – skyork May 31 '13 at 11:32
  • that depends on what particular features of the jQuery dialog you need. In the first instance I'd start with a high zIndex 100% width/height "overlay" div, and build up from there. This may help - http://stackoverflow.com/questions/13993471/jquery-ui-overlay-without-dialog – Alnitak May 31 '13 at 11:38

3 Answers3

16

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

Jai
  • 74,255
  • 12
  • 74
  • 103
  • this works. If the page is greater than the screen you can use `$(document).height` to get the content's full height – messerbill Sep 06 '17 at 12:39
3

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!

Roman
  • 631
  • 1
  • 13
  • 14
0

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();
tady meshesha
  • 31
  • 1
  • 4