jQuery UI dialog is setting iframe width automatically

Question

I want to ask why jQuery UI dialog is setting the width to "auto" automatically?

Below is my iframe to be constructed a dialog.

<iframe id="pklist3" class="ui-dialog-content ui-widget-content" frameborder="0" src="http://localhost/picker" style="width: 570; height: 410px; min-height: 0px;" scrolltop="0" scrollleft="0">

It has a fixed width and height. But every time I call the "dialog('open')" the width gets to "auto" by itself. As for the height it was set to some fixed value (I guess it's calculated by jQuery UI)

I already set the width and height when initializing the dialog. Like this:

var dg = {};
dg.title = this.title;
dg.autoOpen = false;
dg.modal = true;
dg.overlay = { 
opacity: 0.4, 
background: "#000" 
        };                              
dg.resizable = false;
$('#pklist3').dialog(dg); //iframe width is still fixed value up to this line

But after this:

$('#pklist3').dialog('open'); //iframe width gets "auto" automatically

Is this a known behavior? Is there a way we can define the width and height of the iframe by ourselves?

PS. I'm using jQuery UI 1.8.16 and jQuery 1.6.2 and the width of the iframe doesn't change when I initiate the dialog. It only change after I call dialog('open')

Answer 1

In case anyone else is dealing with this issue and stumbles upon this post, as I did, I eventually found a solution that worked for me at: http://enotacoes.wordpress.com/2012/04/19/setting-iframe-width-in-jquery-dialog/

Basically, you set the min-width in the iframe style instead of (or additionally with) the width style.

<iframe src="someurl" width="100%" height="100%" frameborder="0" 
        scrolling="no" style="min-width: 95%;height:100%;"/>