jqxDockingLayout to fill the browser window and resize with it

[DragosPopParticipant]

I am trying to make the jqxDockingLayout do be the size of the browser window and when the browser window is resizing the layout to resize also; more exactly the left, right and bottom parts to keep their sizes and the middle part to resize.

Not even the demo example doesn’t seem to work (with width and height set to 100%)

$(‘#jqxDockingLayout’).jqxDockingLayout({ width: ‘100%’, height: ‘100%’, layout: layout });

Any idea on how to do that?

[DimitarParticipant]

Hello DragosPop,

Unfortunately, this cannot be achieved. If the width and height of the docking layout are set to percentage values, all of its panel groups will be resized when the browser window is resized.

Best Regards,
Dimitar

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

[DragosPopParticipant]

Is this a bug, or is it by design?

Because all the docking layouts that I’ve tried (Visual studio, dev express) works as I described.

If it is by design, how can I get the size of the elements – left, middle, bottom and right panels to change their dimensions when the browser window is resizing?

[DimitarParticipant]

Hi DragosPop,

This is the behaviour of the widget by design. The idea behind it is to allow creating different types of layouts, which may not have the “typical”, Visual Studio-like structure. For example, our Dashboard example does not have a “middle” part and the functionality you requested is not applicable to it. Please note, however, that you can make use of the minWidth and minHeight group properties in order to make your “middle” item at least certain amount of pixels wide or high.

Best Regards,
Dimitar

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

[DragosPopParticipant]

Ok, I understand.
It actually works excellent with fixed dimensions.

Unfortunately for me, I need it to properly resize when the browser window is resized; I’ve tried al sorts of things; the closest one to near work was with a fixed dimensions and changing the sizes when the browser window resizes and then call render, but when I try to move a window to another group I get “Uncaught TypeError: Cannot set property ‘_index’ of undefined” and from that on nothing works.

One more thing: the event.args.item of event resize always shows the documentGroup when I drag the right margin of the left panel; but in fact, besides the middle panel, also the right and bottom panels are resizing; how can I get the new sizes of all of the panels involved?

[DimitarParticipant]

Hi DragosPop,

1. Did you try my suggestion to have groups with percentage dimensions, but restrict the width and height of the “middle” documentGroup with minWidth and minHeight?
2. You can always access the current version of the layout object to see the sizes of the groups in the docking layout. Please note that, internally, all groups’ dimensions are in percentages.

Best Regards,
Dimitar

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

[DragosPopParticipant]

1) The problem wasn’t with the middle width and height – the middle can shrink to nothing; my problem was with the surrounding panels that I want to keep their sizes (vertical panels their width and horizontal panels their height).
2) Ok.

Though jqxDockingLayout was a much nicer control, in the end I end up using a jqxLayout to which I change sizes and then call render after each browser resize.

Thank You for your answers.

[PrashantParticipant]

Hi All,

I have created responsive layout with giving height/width values in ‘%’.

I want to stop responsiveness of layout after certain threshold value and vertical/horizontal scrollbar should appear on browser.

Is it possible to stop responsiveness of layout?

Regards,
Prashant

[DimitarParticipant]

Duplicate post: http://www.jqwidgets.com/community/topic/stop-layout-responsiveness/.

[Author]

Posts