[英]JQuery UI Dialog Scrollbars not Showing on Internet Explorer 8
I have a modal dialog set on an iframe using JQuery UI showing a separate page. 我使用显示单独页面的JQuery UI在iframe上设置了模式对话框。 When the page content height is bigger than the dialog height the scrollbars kind of show up in Firefox although a bit far to the right, when I use Internet Explorer 8 or Chrome they do not show tho. 当页面内容的高度大于对话框的高度时,滚动条会在Firefox中显示,尽管有点偏右,但是当我使用Internet Explorer 8或Chrome时,它们不会显示。 My code goes as follows: 我的代码如下:
Libraries caller code: 库调用者代码:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
Code to open the dialog in a separate .js file: 在单独的.js文件中打开对话框的代码:
function showRegDialog(url) {
idNro = Math.floor((Math.random() * 1500) + 1);
$(function () {
var horizontalPadding = 0;
var verticalPadding = 0;
$('<iframe id="externalSite' + idNro + '" scrolling="no" frameborder="0" padding="0" margin="0" style="overflow:auto" class="externalSite" src="' + url + '" />').dialog({
open: function () {
$(this).siblings('.ui-dialog-titlebar').remove();
},
title: false,
autoOpen: true,
width: 750,
height: 700,
modal: true,
resizable: false,
draggable: false,
autoResize: false,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(550).height(700);
});
}
The opener page has: 打开页面具有:
<style type="text/css">
html {overflow : visible}
</style>
<body>
<ul>
<li><a href="javascript:showRegDialog('view_edit.aspx?c=1');"> Edit<img src="images/btn/edit_pv.png" align="Absbottom" border="0"/></a>
</li>
</ul>
<!--...-->
</body>
The separate content page has: 单独的内容页面具有:
<style type="text/css">
.viewEdit
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px
}
.viewEditForm
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px
}
.viewEditMainDiv
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px
}
</style>
<body class="viewEdit" style="overflow-x:hidden">
<form id="form1" class="viewEditForm">
<div class="viewEditMainDiv">
<!--...-->
</div>
</form>
</body>
How can I make those scrollbars show on IE and Chrome?. 如何使那些滚动条显示在IE和Chrome上? I have done a decent amount of research and seems that overflow:visible
or overflow:auto
would do the trick but this hasn't worked for me yet. 我已经做了大量的研究,而且似乎overflow:visible
或overflow:auto
可以解决问题,但这对我来说还行不通。 Could it be a bug on jquery-ui version if so How can I fix it?. 如果是的话,这可能是jquery-ui版本的错误吗?如何解决?
Thanks a lot for your time and help. 非常感谢您的时间和帮助。
As silly as it looks I changed the scrolling="no"
property of the rendered iframe to scrolling="yes"
and it solved it. 尽管看起来很傻,但是我将呈现的iframe的scrolling="no"
属性更改为scrolling="yes"
并解决了。
function showRegDialog(url) {
idNro = Math.floor((Math.random() * 1500) + 1);
$(function () { var horizontalPadding = 0;
var verticalPadding = 0;
$('<iframe id="externalSite' + idNro + '" scrolling="yes" frameborder="0" padding="0" margin="0" style="overflow:auto" class="externalSite" src="' + url + '" />').dialog({
open: function () {
$(this).siblings('.ui-dialog-titlebar').remove();
},
title: false,
autoOpen: true,
width: 750,
height: 700,
modal: true,
resizable: false,
draggable: false,
autoResize: false,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(550).height(700);
});
}
Thank you. 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.