jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Yuri Antipin 11 years, 10 months ago.

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

Author

extra scrollbar in body Posts

August 16, 2013 at 12:40 pm extra scrollbar in body #26968

Participant

Hi!

Extra scrollbar in BODY appears if I open the window in my example. This occurs because the height of div.jqx-window-modal is calculated incorrectly.

My example is here:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>extra scrollbar in body</title>
        <link rel="stylesheet" href="styles/jqx.base.css"/>
        <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"> </script>
        <script type="text/javascript" src="scripts/jqx-all.js"> </script>
        <script type="text/javascript">
            $(document).ready(function() {
                resize();
                $(window).resize(resize);
                $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: 300 }, { size: 300 }] });
                $('#button').click(function() {
                    var form = $('<div><div/></div>')
                        .attr('id', 'form1');
                    form.jqxWindow({
                        height: 300,
                        width: 400,
                        resizable: true,
                        isModal: true,
                        title: 'Test'
                    });
                });
            });
            function resize() {
                $('#main').css('height', '100%').css('height', '-=30px');
            }
        </script>
        <style type="text/css">
            html, body { height: 100%; }
            body { margin: 0; }
            #mainSplitter {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <header>
            <div style="height: 30px; background-color: azure">header</div>
        </header>
        <div id="main">
            <div id="mainSplitter">
                <div>
                    <div></div>
                </div>
                <div>
                    <div id="contentContainer" style="height: 100%; width: 100%;">
                        <button id="button">Open window</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

August 16, 2013 at 1:13 pm extra scrollbar in body #26974

Peter Stoev

Keymaster

Hi Yuri Antipin,

The solution is: html, body {overflow-y: hidden; height: 100%; }

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 16, 2013 at 2:52 pm extra scrollbar in body #26983

Yuri Antipin

Participant

Hi Peter Stoev, thank you for answer.

I know a solution, I just reported the issue.

August 16, 2013 at 3:37 pm extra scrollbar in body #26996

Yuri Antipin

Participant

Addition:

Usage of body {overflow-y: hidden; } just hides redundant scrollbar. Nevertheless the drag area is greater than screen area (extra area in page bottom).

Author

Posts

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

You must be logged in to reply to this topic.