Menu
Problem
Jquery UI overylay is causing browser's scroll bars to show up. I am using latest Jquery and Jquery UI without any theme.
Code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="includes/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="includes/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
</head>
<body>
<a href="#">open modal</a>
<div id="dialog" style="display:none;">test</div>
<script type="text/javascript">
$('a').click(function () {
$('#dialog').dialog({modal: true});
});
</script>
</body>
</html>
This is extremely simple one. I have no idea why it creates scroll bars.
Any ideas on this one? I will be really glad.
Thank you in advance.
P.S. I'm trying to add Jquery UI to a theme that I have to work with. I tried to eleminate as much as CSS rules as I can.
Right now I'm not so sure if this problem is not related to FireFox (7.0.1). When I use modal dialog window on the theme (UI has theme) I am working with and go back to test.html (without UI theme), problem occurs again. If I am using in both windows (with theme) both is ok with the theme.
Does anyone experienced similar problem?
705
I ran into this issue as well. Adding the following CSS fixed it.
.ui-widget-overlay {
position: fixed;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
