jQuery UI Widgets Forums Layouts DockPanel HowTo update the size of inner docked elements

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 4 years, 10 months ago.

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

  • Rob
    Participant

    Hi,

    I have a problem that the last to docked elements don’t get re-sized in width (both 50%), when i manually change the size of the browser. Any advice would be welcome.

    Thanks

    Having the following code:

    
    // global event handler
     $(window).bind("resize", function () {
                var jqxRespose = new $.jqx.response();
                $("#jqxdockpanel").jqxDockPanel({ width: '100%', height: jqxRespose.viewPort.height, lastchildfill: true });
                $("#jqxdockpanel").jqxDockPanel('render');
            });
    
    // init the docpanel
        var _jqxRespose = new $.jqx.response();
        $("#jqxdockpanel").jqxDockPanel({ width: '100%', height: _jqxRespose.viewPort.height, lastchildfill: true });
    
    // HTML
        <div id='jqxWidget'>
            <div id='jqxdockpanel' style="margin-left: auto; margin-right: auto;">
                <div id='headerDock' dock='top' style='background: white; height: 77px;'>
                </div>
                <div id='menudock' dock='top' style='background: whitesmoke; height: 36px;'>
                </div>
                <div id='leftpane' dock='left' style="background: lightgray; width: 50%;">
                </div>
                <div id='rightpane' dock='right' style="background: darkgray;">
                </div>
            </div>
    

    Dimitar
    Participant

    Hello Rob,

    If you modify your resize handler like this, the elements should resize as expected:

    $(window).bind("resize", function () {
        var jqxRespose = new $.jqx.response();
        $("#jqxdockpanel").jqxDockPanel({ width: '100%', height: jqxRespose.viewPort.height, lastchildfill: true });
        $("#leftpane, #leftpane").width("50%");
        $("#jqxdockpanel").jqxDockPanel('render');
    });

    Best Regards,
    Dimitar

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


    Rob
    Participant

    Hello Dimitar,

    Thanks! $(“#leftpane, #leftpane”).width(“50%”); seems to do the trick 🙂
    Does it have a special reason you wrote two times ‘#leftpane’ ?

    Thanks, Rob

    P.S. Well, after spending a few weeks getting myself familiar with the library its time to buy an commercial license.


    Dimitar
    Participant

    Hi Rob,

    I am sorry, this was actually a typo, I meant to write $("#leftpane, #rightpane").width("50%"); but it seems the solution works with only $("#leftpane").width("50%");.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.