jQuery UI Widgets Forums Layouts Docking How to resize window automaticaly when browser size change

This topic contains 7 replies, has 3 voices, and was last updated by  mberkeland 4 years, 11 months ago.

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

  • pcatric
    Member

    When browser change how resize the window in the docking ?


    Dimitar
    Participant

    Hello pcatric,

    You should change the width of the jqxDocking widget to a percentage, so that it stays relative to the width of the browser. For example:

    $("#docking").jqxDocking({ width: '100%', theme: 'classic' });

    Best Regards,
    Dimitar

    jqWidgets team
    http://www.jqwidgets.com/


    pcatric
    Member

    Thanks, but my problem is this, i have this sample, with horizontal docking (2 lines and 2 columns), and width:100%, height:100% :

    ${messages.get(‘views.dashboard.title.database’)}

    ${messages.get(‘views.dashboard.title.wcs’)}

    ${messages.get(‘views.dashboard.title.dcard’)}

    ${messages.get(‘views.dashboard.title.fault’)}

    When browser resize, by default , 2 window div in the first columns is smaller than the 2 other window div in the second column, i don’t know if i am clear in my description …

    Regards,
    Pascal


    Dimitar
    Participant

    Hi Pascal,

    You should add a width: 50% value to the divs which represent the columns. This example illustrates the solution:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>jQuery jqxDocking Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <style type="text/css">
    .InnerDivs
    {
    width: 50%;
    }
    </style>
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create jqxDocking
    $("#docking").jqxDocking({ width: '100%', theme: 'classic', orientation: 'horizontal' });
    });
    </script>
    </head>
    <body class='default'>
    <div id="docking">
    <div class="InnerDivs">
    <div id="window1">
    <div>
    Header 1</div>
    <div>
    Content 1</div>
    </div>
    <div id="window2">
    <div>
    Header 2</div>
    <div>
    Content 2</div>
    </div>
    </div>
    <div class="InnerDivs">
    <div id="window3">
    <div>
    Header 3</div>
    <div>
    Content 3</div>
    </div>
    <div id="window4">
    <div>
    Header 4</div>
    <div>
    Content 4</div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jqWidgets team
    http://www.jqwidgets.com/


    pcatric
    Member

    Thanks a lot for your help


    mberkeland
    Participant

    Hello! I’m new here, so if this has been covered elsewhere, please let me know!

    The above example works fine, EXCEPT when your initial panels have a combined height greater than the browser window. When this happens, scroll bars appear, and for some reason, all the panels get stacked in the first column. Of course, the moment you resize the window at all, even just one pixel, they pop nicely into place. How can I get then to start out correctly, two across (in the above example)? It is very easy to recreate.. with the above example, just add into the ready() function the heights of the windows:

    $(document).ready(function () {
    // Create jqxDocking
    $(“#docking”).jqxDocking({ width: ‘100%’, theme: ‘classic’, orientation: ‘horizontal’ });
    $(‘#docking’).jqxDocking(‘setWindowProperty’, ‘window1’, ‘height’, 500);
    $(‘#docking’).jqxDocking(‘setWindowProperty’, ‘window2’, ‘height’, 500);
    $(‘#docking’).jqxDocking(‘setWindowProperty’, ‘window3’, ‘height’, 500);
    $(‘#docking’).jqxDocking(‘setWindowProperty’, ‘window4’, ‘height’, 500);
    });

    Thanks!
    -Mark


    Dimitar
    Participant

    Hello Mark,

    You need to call the refresh method with parameter false to avoid this unexpected reordering:

    $(document).ready(function () {
        // Create jqxDocking
        $("#docking").jqxDocking({ width: '100%', theme: 'classic', orientation: 'horizontal' });
        $('#docking').jqxDocking('setWindowProperty', 'window1', 'height', 500);
        $('#docking').jqxDocking('setWindowProperty', 'window2', 'height', 500);
        $('#docking').jqxDocking('setWindowProperty', 'window3', 'height', 500);
        $('#docking').jqxDocking('setWindowProperty', 'window4', 'height', 500);
        $("#docking").jqxDocking('refresh', false);
    });

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    mberkeland
    Participant

    Yep!! That did the trick! THANK YOU for your quick (and accurate) response!
    -Mark

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

You must be logged in to reply to this topic.