JQuery Div Height Dialog Box

Question

I am trying to get the height of the jQuery UI dialog dialog box after opening so that I can dynamically set the parent height of the iframe.

However, it seems to me that I am returning the height of the div before the footer button bar and header bar are added. The height for the dialog is set to "auto";

$(this).height($('#dialogdiv').height()); 

I tried outerHeight and offset Height as well, but get similar results.

Any ideas?

Answer 1

div you call .dialog() on is actually embedded in another div structure that make up the actual jQuery UI dialog box that is displayed. What you want to call is the following:

 $(this).height( $('#dialogdiv').closest('.ui-dialog').height()); 

You may also need to play with outerHeight , but the important part is the closest , which will receive the outer shell of the dialog for the dialog.

If your code looked like this:

 <div id="dialogdiv"> Contents....</div> 

After calling .dialog({ options }) it will look like this (very simplified):

 <div class="ui-dialog ..."> <div class="ui-dialog-titlebar ..."> ... </div> <div id="dialogdiv" class="ui-dialog-content ..."> Contents....</div> <div class="ui-dialog-buttonpane ..."> ... </div> </div>