Use Flow Layout Panels to Design Responsive Layout

You can use flow layout panels, widget containers, to design analytic applications that can adapt to different screen sizes.

About Flow Layout Panels

Flow layout panel is a container that provides responsive layout. For example, if a screen size is too small to fit two widgets in one row, then the widget on the right will flow to the next row automatically.

Note

Widgets that are set to invisible at runtime don’t take up any space inside a flow layout panel.

Inside each flow layout panel, a widget's width and height (either in pixel or percentage) are respected, but its position (left, right, top or bottom) will be automatically adjusted to the screen size.

To be more specific:

  • If a widget’s width is set as static, such as pixel, the widget will flow to the next row if the screen size is too small for it to fit in.

  • If a widget’s width is set to percentage (recommended for mobile), when the screen size gets smaller, the widget’s size will shrink as well by its percentage until its minimal width is reached. After that it will flow to the next row.

Note

Layout APIs such as setLeft, setTop, setRight and setBottom won’t take effect in flow layout panels.

You can directly drag and drop any widget into the flow layout panel. For multiple widgets, you can multi-select and then from the (More Actions) menu select Group in Flow Layout Panel to place them all at once. You can also set the width or height of all the selected widgets to percentage from the menu.

Configure Responsive Rules

You can also configure responsive rules in the Builder panel of a flow layout panel by setting break points.

There you can define how the width and height of certain widgets will be adjusted as well as which widgets to be hidden in runtime when the screen width is smaller than a certain threshold.

Design Responsive Layout

You have the flexibility to keep some contents at a fixed position and others in responsive layout, such as always leaving a header on the top or a navigation panel on the right of the application.

You only need to place a flow layout panel and widgets in fixed area side by side, such as the following typical layouts of analytic applications:

Besides, you can nest common panels in a flow layout panel to create more sophisticated layouts.