Google suggets use FlowPanel in replace of VerticalPanel since VerticalPanel does not work well in Standards Mode (http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html).
myflowPanel.getElement().getStyle().setFloat(Float.NONE);
doesn't work
So How to make FlowPanel flow its children vertically like VerticalPanel?
A FlowPanel
is rendered as a html '<div>', so anything added to it will be positioned depending on its default display.
For instance children widgets rendered as a '<div>' like Label
will be positioned vertically because their default behavior is as a block, but if you add a TextBox
it will be rendered as an '<input>' whose default display is inline-block.
So the way to dispose children in a FlowPanel
is setting the property display
appropriately for each children, playing with the float
property, or any other css tweak like flexbox. Normally gwt designers do this setting styles in ui-binder templates. But if you want to do by code you can do this:
// Example of a flow panel with all elements disposed in vertical
FlowPanel verticalFlowPanel = new FlowPanel();
TextBox textBox = new TextBox();
Label label = new Label("Foo");
textBox.getElement().getStyle().setDisplay(Display.BLOCK);
verticalFlowPanel.add(textBox);
verticalFlowPanel.add(label);
RootPanel.get().add(verticalFlowPanel);
// Example of a flow panel with all elements disposed in horizontal
FlowPanel horizontalFlowPanel = new FlowPanel();
TextBox textBox2 = new TextBox();
Label label2 = new Label("Foo");
label2.getElement().getStyle().setDisplay(Display.INLINE_BLOCK);
horizontalFlowPanel.add(textBox2);
horizontalFlowPanel.add(label2);
RootPanel.get().add(horizontalFlowPanel);