jQuery UI对话框中的iFrame导致父级的水平滚动条 [英] iFrame in jQuery UI dialog causes horizontal scrollbar on parent
问题描述
我正在使用jQuery UI对话框在新的iFrame中显示内容。一切都很好，除了对话框的父窗口在显示对话框时获得水平滚动条（IE8）。我已将问题追溯到< html> iFrame中的元素被浏览器解释为非常宽，即使是580px div中iFrame页面上的唯一内容。
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.
我尝试添加CSS到iFrame中的HTML和BODY标签（例如宽度：98％或宽度：600px;）......似乎没有任何影响。
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 ：查看这些演示，我在哪里获得代码，看看是什么我在谈论（在IE8中）： http://elijahmanor.com/demos/jqueryuidialogiframe/index .html
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
推荐答案
这似乎是jQuery UI 1.7.2中的一个小错误，目前还有关于此问题的开放票证（＃3623）。票证评论中提出了两种解决方案：
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:
修改 jquery-ui-1.7 .2.custom.css ：
- 查找
.ui-widget-overlay。 - 添加以下规则：
position：fixed;。
- Find
.ui-widget-overlay. - Add the following rule:
position:fixed;.
解决方案B
修改 jquery-ui-1.7.2.custom.min.js ：
- 查找
addClass（ui-widget-overlay）。css（{width：this.width（） ，height：this.height（）}）;在第97行。 - 删除
.css（{width：this.width（ ），身高：this.height（）}）。
- Find
addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});on line 97. - Delete
.css({width:this.width(),height:this.height()}).
这篇关于jQuery UI对话框中的iFrame导致父级的水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
