The Flow Row widget is a layout container that you can use to position content in a continuous row on a page. It is similar to the Row widget, except the area of the Row widget is divided into 12 discrete columns, while the Flow Row widget is continuous, similar to a scrolling page and the Column widget.
Examples
Use this widget to support app design requirements such as the following:
- You want page elements, such as images and their descriptions, to be aligned horizontally.
- When you remove something from a row, you want the other widgets in the flow row to automatically shift or fill the space left by what you removed.
- You want to evenly space multiple widgets horizontally.
- You want to place two Text widgets in a row.
Tip:
If you place two Text widgets in a Fixed Panel widget, they might overlap or be cut off at different resolutions because their positions are independent of each other. You can avoid overlapping and cutoff problems by placing Text widgets in a Flow Row widget and setting all three widget widths to Auto.
Usage notes
To add widgets to the Flow Row widget, click the Add widget button on the widget toolbar and select from the widget gallery or drag widgets from the Insert widget panel.
Once you add at least one widget to the row, the Manage widget button appears on the widget toolbar. Click this button to open a window where you can reorder and remove nested widgets.
When you remove a widget, any remaining widgets shift to fill the remaining space. How they shift depends on the alignment you choose in the widget settings.
Note:
To preserve this behavior in express mode, Placeholder widgets do not appear when you remove a widget from a Flow Row widget as they do for other layout containers in express mode.
To increase the size of a nested widget, adjust its width manually or resize the Flow Row widget.
Settings
The Flow Row widget includes the following settings:
- Horizontal align—Choose how to align nested widgets in the row.
- Start—Align nested widgets to the left of the row.
- End—Align nested widgets to the right of the row.
- Center—Align nested widgets to the center of the row.
- Space evenly—Position nested widgets in the row with the same amount of space on either side of each of them. The space between widgets includes the specified gap.
Each of the horizontal alignment settings has a corresponding numbered diagram that illustrates how nested widgets distribute in the Flow Row widget.
- Gap—Define the amount of horizontal space between nested widgets in pixels (px).
Tip:
If you want the edges of the nested widgets to touch, align the widgets to the start, end, or center and provide a gap value of 0 pixels.
- Padding—Change the size of the padding spaces, which are the spaces between the nested widgets and the edges of the Flow Row widget panel, either all at once or separately. You can specify size values in pixels (px) or percent of the canvas (%).