HowTo update the size of inner docked elements

[RobParticipant]

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>

[DimitarParticipant]

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/

[RobParticipant]

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.

[DimitarParticipant]

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/

[Author]

Posts