jQWidgets Forums
jQuery UI Widgets › Forums › Dialogs and Notifications › Window › Jumpy scroll bar on the main window with isModal enabled
This topic contains 6 replies, has 4 voices, and was last updated by sirstruck 10 years ago.
-
Author
-
Hello,
I’m getting an issue with jumpy scroll-bar of the browser every time when I open jqxWindow with isModal set to “true”. The issue only appears when the jqxWindow is opened for the 1st time and only if a browser’s window is maximized (i.e. it fully fits on the screen w/o showing scroll bars). Any following openings of the jqxWindow with isModal option enabled or if a browser window size less than full screen everything is working just fine. The issue appears on IE, Chrome, FF. Without isModal set to “false”everything works fine. I suspect that for some reasons it is caused by area of opacity expanding beyond the visible screen area.
Please advice
Regards
Igor<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head><link rel=”stylesheet” href=”../jqw/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqw/jqwidgets/styles/jqx.ui-redmond.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqw/jqwidgets/styles/jqx.ui-le-frog.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqw/jqwidgets/styles/jqx.darkblue.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqw/jqwidgets/styles/jqx.energyblue.css” type=”text/css” />
<script type=”text/javascript” src=”../jqw/scripts/gettheme.js”></script>
<script type=”text/javascript” src=”../jqw/scripts/jquery-2.0.3.min.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxvalidator.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxmaskedinput.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../jqw/jqwidgets/jqxcombobox.js”></script><script>
$(document).ready(function () {
$(“#jqxTabs”).jqxTabs({ height: ’98vh’ , width: ‘100%’, position: ‘top’, animationType: ‘fade’ ,
selectionTracker: ‘checked’ ,theme: ‘ui-redmond’});$(“#expander”).jqxExpander({ toggleMode: ‘none’, width: ‘98%’ , showArrow: false, theme: ‘energyblue’ });
$(‘#button1’).jqxButton({ theme: ‘darkblue’, width: ‘100px’ });
$(‘#testwindow’).jqxWindow({showCollapseButton: false,height: 370, width: 500, isModal: true, modalOpacity: 0.3,
resizable: false, autoOpen: false, theme: ‘darkblue’ });$(‘#button1’).click(function () {
$(‘#testwindow’).jqxWindow(‘open’);
});
}); // End of the .ready() function</script>
</head>
<body class=’default’>
<div id=’jqxTabs’>
<ul>
<li style=”margin-left: 50px;”>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div>
<div id=”expander” style=”margin-left: 1%; margin-top: 1%; margin-right: 1%”>
<div>An Expander</div>
<div > <!– Body of the Expander –>
<input type=”button” value=”Open Window” id=”button1″ />
</div>
</div>
</div><div>
Content of the 2nd TAB
</div>
<div>
Content of the 3rd TAB
</div></div>
<div id=”testwindow”>
<div>A Window</div>
<div></div>
</div></body>
</html>Hi kingaru,
We cannot reproduce such behavior with the current version of jQWidgets – ver. 3.0.2.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHello Peter,
I tried releases starting from 2.8.3 till the current one and they all have the same issue.
It is a bit tricky issue which may not be too easy to re-produce .
Please take look at this screenshot: http://i44.tinypic.com/1rdk61.png
You can see that when window with isModal is opened absolutely unnecessary scroll bars will be appearing in the browser window.
This is behavior that I observe in Linux. Under Windows 8 when I open window for the 1st time only vertical scroll bar in the browser will be appearing and instantly disappearing .Regards
IgorHello,
OK.. the working solution was to disabled sliders in the browser window completely by using:
document.body.scroll = “no”;
document.body.style.overflow = ‘hidden’;
document.height = window.innerHeight;Not sure if this is the right way to go but it helps here since jqxTab has it is own sliders.
Regards
IgorHi!
I have the same problem in Chrome, FF and IE10. I’m using jQWidgets v3.0.4. I think the problem lies in the following HTML
<div class=”jqx-window-modal” style=”opacity: 0.3; display: none; position: absolute; top: 0px; left: 0px; width: 1913px; height: 1161px; z-index: 12990;”></div>
My window’s width is 1903px and height 1032px but in the upper HTML we can see the wrong values for the width and height of the window.
Found a temporary workaround:
$(document).ready(function () {
// fix width and height of modal window
$(‘.jqx-window-modal’).css(‘height’, $(window).height());
$(‘.jqx-window-modal’).css(‘width’, $(window).width());
});Yeah, I’m seeing the same thing (although intermittently) in v3.0.4. Thanks for posting the workaround, jqWizard! Although, I decided to use window.innerWidth and window.innerHeight.
-
AuthorPosts
You must be logged in to reply to this topic.