jQWidgets Forums

Tagged: jqxwindow window modal background

This topic contains 6 replies, has 4 voices, and was last updated by sirstruck 10 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Jumpy scroll bar on the main window with isModal enabled Posts
September 28, 2013 at 9:22 am Jumpy scroll bar on the main window with isModal enabled #29757

kingaru
Participant

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>

September 30, 2013 at 5:26 am Jumpy scroll bar on the main window with isModal enabled #29801

Peter Stoev
Keymaster

Hi kingaru,

We cannot reproduce such behavior with the current version of jQWidgets – ver. 3.0.2.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 30, 2013 at 5:39 pm Jumpy scroll bar on the main window with isModal enabled #29854

kingaru
Participant

Hello 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
Igor

October 1, 2013 at 5:10 pm Jumpy scroll bar on the main window with isModal enabled #29991

kingaru
Participant

Hello,

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
Igor

November 25, 2013 at 6:29 am Jumpy scroll bar on the main window with isModal enabled #38987

jqWizard
Participant

Hi!

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.

November 25, 2013 at 6:58 am Jumpy scroll bar on the main window with isModal enabled #39094

jqWizard
Participant

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());
});

March 13, 2015 at 10:32 pm Jumpy scroll bar on the main window with isModal enabled #68517

sirstruck
Participant

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.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.