开发者

jQuery UI dialog is setting iframe width automatically

开发者 https://www.devze.com 2023-03-31 19:04 出处:网络
I want to ask why jQuery UI dialog is setting the width to \"auto\" automatically? Below is my iframe to be constructed a dialog.

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 th开发者_如何学运维e "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')


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


You can define the element width on init :

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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号