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

Perth

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

Sheply

Answer 2

You can define the element width on init :

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

Better

Already did that. I edited my question again. Thanks for the response :D – Perth

What about the dialog content? Does it have a fixed width? You can also try to edit the UI CSS to define a min-width, not sure it will work though.. – Better

:D I even try it with an empty iframe. The iframe width is still changed to "auto". Truly very odd behavior. – Perth

Does it happen with other elements? If not, fire a ticket on jquery's bucktracker. – Better

Oh ok yoda, I will try to post the bug on their bugtracker :D thank you! – Perth

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

Edveh