Question

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?

Answer 1

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>