iFrame in jQuery UI dialog causes horizontal scrollbar on parent

Asked 6/12, 2009 at 19:7 Answered 17/3, 2015 at 13:33

Solved jquery jquery-ui iframe jquery-ui-dialog

I'm using the jQuery UI dialog to present content in a new iFrame. Everything works out great except that the parent window of the dialog is getting a horizontal scrollbar while the dialog is displayed (IE8). I've tracked down the problem to the <html> element within the iFrame being interpreted as very wide by the browser, even though the only content on the page in the iFrame in a 580px div.

I've tried adding CSS to the HTML and BODY tags within the iFrame (e.g. width: 98% or width: 600px;)... none of which seems to have any impact.

The code for opening the dialog is below. Any suggestions?

$("a[providerId]").click(function(e) {
                e.preventDefault();
                var $this = $(this);
                var $width = 600;
                var $height = 400;
                $('<iframe id="companyDetail" class="companyDetail" style="padding: 0px;" src="' + this.href + '" />').dialog({
                    title: $this.attr('title'),
                    autoOpen: true,
                    width: $width,
                    height: $height,
                    modal: true,
                    resizable: false,
                    autoResize: true,
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                }).width($width).height($height);
            });

UPDATE: Check out these demos where I got the code to see what I am talking about (in IE8): http://elijahmanor.com/demos/jqueryuidialogiframe/index.html

Jackass answered 6/12, 2009 at 19:7 Comment(2)

I cannot post a demo due to an NDA that is in place. If there is more information/code that would be helpful, let me know and I'll post as much as I can. – Jackass 6/12, 2009 at 19:30

a printscreen maybe? just to be sure i understand correctly? – Unsuspected 6/12, 2009 at 20:58

This seems to be a small bug in jQuery UI 1.7.2 and there is currently an open ticket (#3623) on the issue. Two solutions are proposed in the ticket comments:

Solution A

Modify jquery-ui-1.7.2.custom.css:

Find .ui-widget-overlay.
Add the following rule: position:fixed;.

Solution B

Modify jquery-ui-1.7.2.custom.min.js:

Find addClass("ui-widget-overlay").css({width:this.width(),height:this.height()}); on line 97.
Delete .css({width:this.width(),height:this.height()}).

Orel answered 12/12, 2009 at 5:52 Comment(3)

This did not work. However, the ticket you referenced did point me in the right direction. I changed the CSS file's ui-widget-overlay class position to fixed. Since you pointed me in the right direction, I'll give you the accepted answer if you change it to reflect what actually fixed the issue. – Jackass 12/12, 2009 at 18:10

Ok, I'll do that. I tried the position:fixed solution and it didn't work for me, but the one I posted did, I'll just include both solutions. – Orel 12/12, 2009 at 20:33

awesome. this worked for me in JQuery dialog. But, rather than modifying jQuery CSS, I would also prefer to write the overwritten version in my custom css file just like - .ui-widget-overlay { position: fixed!important; }. That's a minor thing,but your answer saved a lot more efforts of mine. thanks – Metopic 30/7, 2013 at 13:15

My first thought was overflow-x : hidden and in my case in IE8 in standard mode as well as quirks mode it does the trick, horizontal bar disapears. All you need to to is put it on body tag.

Mymya answered 13/12, 2009 at 6:46 Comment(0)

If it only happens when the modal ui is displayed, check the css controlling the div in charge of the overlay.
Check also your doctype.
Did you try playing with overflow:hidden ?

Posting the url to an online demo of the problem would help.

Unsuspected answered 6/12, 2009 at 19:17 Comment(11)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> I have played around with every permutation of overflow: hidden (overflow-x, etc)... The css is practically verbatim from 960.gs (basically everything is zeroed out in reset.css). – Jackass 6/12, 2009 at 19:33

did you try setting the iframe width to, say, 400px ? – Unsuspected 6/12, 2009 at 20:59

i did try that, both explicitly in the tag and with the .width($width) that is in the code above. – Jackass 6/12, 2009 at 22:40

if you load that html page separately (not in the iframe), it displays fine? – Unsuspected 7/12, 2009 at 0:41

Yes, it does. And I'm beginning to think that this is an obscure IE8 bug. I searched around to try to find other sites using this technique and every one has the exact same issue. FF, Chrome and Safari are all fine. – Jackass 7/12, 2009 at 3:7

Try adding this to your head tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> – Unsuspected 7/12, 2009 at 14:34

also try playing with the loaded html page's html tag: html{ float: left; display: inherit !important; } – Unsuspected 7/12, 2009 at 14:37

I don't want to emulate IE7 throughout the site (since dialogs like this are used throughout). I'll let you know if the last suggestion works. – Jackass 8/12, 2009 at 16:40

No luck. I'm considering adding a bounty to this question because this is driving me nuts... – Jackass 9/12, 2009 at 19:17

it would really help if you would set up a demo of the issue. – Unsuspected 9/12, 2009 at 20:51

See the link I added to the original post for examples of the issue. – Jackass 10/12, 2009 at 16:31

I had the same problem. In my case the dialog is a child of body and I used the following script to prevent overflow:

$("#your-dialog").dialog({
  //our options,
  open: function(){
    $("body").css("overflow", "hidden");
  },
  close: function(){
    $("body").css("overflow", "initial");
  }
});

Lichee answered 17/3, 2015 at 13:33 Comment(0)

Solution A

Solution B

Recommended topics

Hot tags