Question

I create and add a widget to a DockLayoutPanel as so:

DockLayoutPanel dockPanel = new DockLayoutPanel(Unit.PCT);  
dockPanel.addNorth(widget, size);

What does the size parameter determine?

Google says to use the CSS parameters left, top, width, height, right, and bottom to determine the child’s size(at the subsection Constraint-based Layout).

Logically, passing the value 100 (with units %) as size would make the widget fill it’s container, as it represents a single dimension.

I simply want to attain a layout where the north widget is 100px height with 100% width, the east and west are 100% height and 25% width and the centre takes the remaining space. I achieved this with vanilla DockPanel but the UI wasn’t robust enough on window size changes etc.

I would appreciate an explanation of DockLayoutPanel sizing, or any helpful pointers. Thanks in advance.

NOTE: I am not interested in using UI binder as I have already created the application, this process is maintenance work.

Answer 1

For north and south sub-panels the size argument determines their height, with width being implicitly 100%. For east and west sub-panels the argument determines their width with height being implicitly 100%.