iFrame in jQuery UI dialog causes horizontal scrollbar on parent

StackOverflow https://stackoverflow.com/questions/1856258

Question

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

Was it helpful?

Solution

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()}).

OTHER TIPS

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.

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

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");
  }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top