views:

2932

answers:

3

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

A: 
  • 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.

pixeline
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.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).
mkedobbs
did you try setting the iframe width to, say, 400px ?
pixeline
i did try that, both explicitly in the tag and with the .width($width) that is in the code above.
mkedobbs
if you load that html page separately (not in the iframe), it displays fine?
pixeline
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.
mkedobbs
Try adding this to your head tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
pixeline
also try playing with the loaded html page's html tag:html{ float: left; display: inherit !important; }
pixeline
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.
mkedobbs
No luck. I'm considering adding a bounty to this question because this is driving me nuts...
mkedobbs
it would really help if you would set up a demo of the issue.
pixeline
See the link I added to the original post for examples of the issue.
mkedobbs
+2  A: 

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:

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

Solution B

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

  1. Find addClass("ui-widget-overlay").css({width:this.width(),height:this.height()}); on line 97.
  2. Delete .css({width:this.width(),height:this.height()}).
Rikki
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.
mkedobbs
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.
Rikki
+1  A: 

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.

spirytus