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

Rob Kielty · Accepted Answer · 2012-10-29 01:45:03Z

13

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

edited Oct 29, 2012 at 1:45

Rob Kielty

8,1928 gold badges43 silver badges52 bronze badges

answered Oct 29, 2012 at 1:18

Nathan Pond

3363 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yoda · Accepted Answer · 2011-08-29 19:19:30Z

0

You can define the element width on init :

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

answered Aug 29, 2011 at 19:19

yoda

11k19 gold badges68 silver badges94 bronze badges

5 Comments

strike_noir Over a year ago

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

yoda Over a year ago

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

strike_noir Over a year ago

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

yoda Over a year ago

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

strike_noir Over a year ago

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

Colin Lee · Accepted Answer · 2015-03-25 04:06:13Z

0

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

answered Mar 25, 2015 at 4:06

Colin Lee

2012 silver badges5 bronze badges

Collectives™ on Stack Overflow

jQuery UI dialog is setting iframe width automatically

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related