How to make FlowPanel flow its children vertically like VerticalPanel?

Question

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?

Answer 1

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);