jQuery UI dialog is setting iframe width automatic

问题:

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

回答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%;"/>

回答2:

You can define the element width on init :

$('#something').dialog({
    width: '100px'
});

回答3:

<iframe src="<%= AppConfig[:running_url] %>" frameborder="0" scrolling="no"></iframe>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $("iframe").height($(window).height());
    $("iframe").width($(window).width());
  });
</script>

I think scrolling="no" is necessary.