GWT - How to add a space in DockLayoutPanel

Question

I want to add two widgets in south of DockLayoutPanel, so it'll be shown as this:

---

center panel

---

a space of 14px height

---

a widget of 29px height

---

My problem is: If I use addSouth(widget, 29); it has no space.
If I use addSouth(widget, 43); it also has no space, but the widget is now 43px height.
I thought to define the widget's margin as 14px, but it doesn't help me, because the widget's margin covers the center panel.
What should I do? I tried also to do twice addSouth, and it produce the most nicer result, but it also wasn't as expected, and I prefer using of only one addSouth.

Answer 1

You can try to add widget in separate LayoutPanel and then add panel to dock panel. Inside LayoutPanel just specify space from top.

LayoutPanel panel = new LayoutPanel();
panel.add(widget);
panel.setWidgetLeftRight(widget, 0, Style.Unit.PX, 0, Style.Unit.PX);
panel.setWidgetTopBottom(widget, 14, Style.Unit.PX, 0, Style.Unit.PX);

dockPanel.addSouth(panel, 43);

Answer 2

to set the distance between widgets in a DockPanel use

dockPanel.setSpacing(14);

if you want the spacing only for a certain widget you have to use CSS or add a higher CellHeight to the dockPanel widget.

dockPanel.setCellHeight(widget1, //widget1.heigth+14px);

to place the widget at the bottom of the cell
dockPanel.setCellVerticalAlignment(widget1, HasVerticalAlignment.ALIGN_BOTTOM);


CSS:

.gwt-Label-foo {
    margin-top: 14px;
}

then add the dependentStyle to your widget(in this case a Label) widget.addStyleDependentName("foo");

for help look here: Add a StyleDependetName and here: CSS Styling of Widgets