JQuery UI dialog automatically sets iframe width

Question

I want to ask why does the jQuery UI dialog automatically set the width to "auto"?

Below my iframe will be built dialogue.

<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 each time I call “dialog (“ open ”), the width automatically goes to“ auto. ”As for the height, it was set to some fixed value (I think it was calculated using 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 that:

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

Is this a known behavior? Is there a way to determine the width and height of the iframe yourself?

PS. I am using jQuery UI 1.8.16 and jQuery 1.6.2 and the width of the iframe does not change when I start the dialog. It changes only after calling the dialog ("open")

Answer 1

In case someone else encounters this problem and stumbles on this post, like me, 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 minimum width in the iframe style instead of (or optionally) the width style.

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

Answer 2

You can define a width element for init:

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

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" necessary.