2

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.

DarthGazak
  • 59
  • 1
  • 7
  • The DockLayoutPanel supports sizes in one of the ways(CM, PCT, PX). But you are mixing the sizes. For one child, you want in PX. For others you want in percentages. I don't think it is possible. But you are saying that you are able to achieve this layout. Please post the code you developed. Also, make sure that you are using standard mode with the explicit . And make sure that you are using RootLayoutPanel which is essential for resizing the layout panel on browser resize. – Ganesh Kumar Jun 15 '12 at 04:01
  • The code I developed used a **DockPanel**, you do not have to specify the size unit in the constructor. I have stated the required and use the RootLayoutPanel. – DarthGazak Jun 15 '12 at 08:37

1 Answers1

5

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%.

Boris Brudnoy
  • 2,405
  • 18
  • 28
  • More straightforward than I thought! My main purpose is to create a 'header' bar at the top of my application. By constricting the actual composite widget(consisting of the DockLayoutPanel and some widgets in it's sub panels) to a height of 100 pixels, the entire 'header' will have a constant height. I can then size the sub-panels accordingly using percentages, applying your advice. Voila, dynamic sizing on the horizontal axis, what I desire. – DarthGazak Jun 15 '12 at 08:25