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.

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

  • 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>

     


    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


    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


    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


    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.


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


    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.

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

You must be logged in to reply to this topic.