iFrame in jQuery UI dialog causes horizontal scrollbar on parent
I'm using the jQuery UI dialog to present content in a new iFra开发者_Python百科me. 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
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()}).
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");
}
});
加载中,请稍侯......
精彩评论