How to resize window automaticaly when browser size change - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: browser, docking, jqxDocking, relative, width, window

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

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

Author

How to resize window automaticaly when browser size change Posts
August 23, 2012 at 4:52 pm How to resize window automaticaly when browser size change #7059

pcatric
Member

When browser change how resize the window in the docking ?

August 24, 2012 at 5:14 am How to resize window automaticaly when browser size change #7081
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/
August 24, 2012 at 5:51 am How to resize window automaticaly when browser size change #7083

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

August 24, 2012 at 6:38 am How to resize window automaticaly when browser size change #7084
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/
August 24, 2012 at 6:42 am How to resize window automaticaly when browser size change #7085

pcatric
Member

Thanks a lot for your help

October 14, 2015 at 6:35 am How to resize window automaticaly when browser size change #76833

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

October 14, 2015 at 8:50 am How to resize window automaticaly when browser size change #76852
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/
October 15, 2015 at 5:33 am How to resize window automaticaly when browser size change #76885

mberkeland
Participant

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

Posts

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

You must be logged in to reply to this topic.