iFrame in jQuery UI dialog causes horizontal scrollbar on parent

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 whi

Answer 1

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");
  }
});

Answer 2

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

Answer 3

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.

Answer 4

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