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?

Catchword

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

Hammers

if all children r from the same widget type like Label it will flow horizontally. If 1 widget is label & other is Textbox, then it will flow vertically. Any any i found a solution – Catchword

@Minh Hai, That is not true, it depends on the nature of the widget. If all widgets are labels, they always flow vertically, unless you set the style to another thing. – Harned

Thax you for ur answer, but is it true that it runs much fater with FlowPanel than VerticalPanel or HorizontalPanel? since VP & HP use <table> tag? – Catchword

FlowPanel is faster, although the developer has to know how to dispose their elements in the ui using css tricks (maybe gwt-team could add some parameter to do it automatically). VerticalPanel and HorizontalPanels are there because they work out of the box. To notice the performance issue you need very big panels with hundreds of children though. – Harned

I did a HorizontalFlowPanel to solve my problem. Take a look at: https://mcmap.net/q/1057467/-gwt-how-to-layout-components-horizontally-in-a-flowpanel – Halfway

Answer 2

Using display:block; for children then it will be ok. I found my app runs much faster after converting VerticalPanel to FlowPanel.

Catchword