jQWidgets Forums

jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Validator scrolling page off screen

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  ivailo 9 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Validator scrolling page off screen Posts
  • August 5, 2015 at 2:27 am Validator scrolling page off screen #74520

    toquehead
    Participant

    I have a container with overflow:hidden, and a absolutely positioned modal dialog/div. When validation inside the “modal” div fails, the whole body is scrolled so the top is off screen even when the div and the validation tooltip is fully visible. As I’ve got a 100% height partially opaque div underneath, this produces a very ugly result, and as my container is non-scrollable, there is NO way for the user to scroll back.

    A simple example below. Size your browser window so the bottom of the window is just below the bottom of the green box and click Validate.

    <html>
    <head>
    <title>jqxValidtor Bug</title>
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />

    <script type=”text/javascript” src=”scripts/jquery-2.0.2.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/src/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/src/jqxtooltip.js”></script>
    <script type=”text/javascript” src=”jqwidgets/src/jqxvalidator.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘#dialog’).jqxValidator({
    rules: [
    { input: ‘#txt’, message: ‘Validation failed.’, action: ‘blur’, rule: function () { return false; } }
    ]
    });
    });

    $(document).on(‘click’, ‘#button’, function () {
    $(‘#dialog’).jqxValidator(‘validate’);
    });
    </script>
    <style type=”text/css”>
    body {
    overflow: hidden;
    }
    div#body {
    margin: 1em;
    border: 1px solid blue;
    height: 40em;
    }
    div#modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(128, 128, 128, 0.5);
    z-index: 100;
    }
    div#dialog {
    position: absolute;
    border: 1px solid green;
    top: 10em;
    left: 10em;
    height: 20em;
    width: 20em;
    z-index: 101;
    }
    </style>
    </head>
    <body>
    <div id=”body”></div>

    <div id=”modal”>
    <div id=”dialog”>
    <button id=”button”>Validate</button>
    <input id=”txt” type=”text” />
    </div>
    </div>
    </body>
    </html>

    August 5, 2015 at 6:44 am Validator scrolling page off screen #74524

    ivailo
    Participant

    Hi toquehead,

    If the problem is in modal’s background disposition you can create additional div about modal background layer.

    Here is the demo.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    August 6, 2015 at 12:33 am Validator scrolling page off screen #74557

    toquehead
    Participant

    I found an undocumented property “scroll” of jqxValidator that you referenced in another forum post. Like:

    $(‘#divPreferences’).jqxValidator({
    scroll: false,
    rules: [
    { input: ‘#preferences-chart-height’, message: ‘Enter a height between 200 and 4000.’, action: ‘blur’, rule: _validateSize },
    { input: ‘#preferences-chart-width’, message: ‘Enter a width between 200 and 4000.’, action: ‘blur’, rule: _validateSize }
    ]
    });

    It solves my problem. Is it safe to use that?

    August 7, 2015 at 8:43 am Validator scrolling page off screen #74608

    ivailo
    Participant

    Hi toquehead,

    Setting scroll: false don’t have to produce any problems, so you can use it.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.