I am trying to get the height of a JQuery UI's dialog's div once opened, so that I can set the parent's iframe height dynamically.

However it seems to be returning me the height of the div before the footer button panel and title panel are added. The height for the dialog is set to "auto";

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

I have tried, outerHeight and offset Height aswell, but get similar results.

Any ideas?

I am trying to get the height of a JQuery UI's dialog's div once opened, so that I can set the parent's iframe height dynamically.

However it seems to be returning me the height of the div before the footer button panel and title panel are added. The height for the dialog is set to "auto";

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

I have tried, outerHeight and offset Height aswell, but get similar results.

Any ideas?

• javascript
• jquery
• html
• height

Share Improve this question Follow asked Jan 26, 2010 at 14:52 cwestoncweston 11.7k2121 gold badges8585 silver badges107107 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The div you call .dialog() on is actually embedded into another framework of divs that make up the actual jQuery UI Dialog that displays. What you will want to call is this:

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

You also may still need to play with outerHeight but the important part is the closest which will get the outer dialog wrapper for the Dialog.

If your code looked like this to start:

<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>