Layout
The Layout section of the Styles menu enables you to configure the visual arrangement of a component's children:
The Layout section is divided into five sections:
The Mode setting enables you to arrange components in the following layouts:
- Column: Aligns the children in a vertical column.
- Row: Aligns the children in a horizontal row.
- Grid: Lays out the components in a grid from left to right and top to bottom.
The Grid selection enables you to configure the following sub-options:
- Columns: The number of columns in the grid. Select from the following sub-options to configure this property:
- Fixed: Manually specify the number of columns.
- Auto Fill: Uiflow automatically determines the number of columns required for the components on the page.
- Min Col W: The minimum and maximum width of the columns in the grid. Select from the following sub-options to configure these widths:
- px: Specify the width in pixels.
- %: Specify the width as a percentage of the page width.
- vw (vertical width): Specify the width where each unit is 1/100 of the screen width (e.g., 20 vw is 1/5th, 50 vw is 1/2, etc.).
- vh (vertical height): Specify the width where each unit is 1/100 of the screen height (e.g., 20 vh is 1/5th, 50 vh is 1/2, etc.).
- fr (applicable to Max Col w only): Specify the width as a fractional unit of the available horizontal space.
- - (applicable to Max Col w only): Unset the width (i.e., don't specify a maximum width).
- Col Spacing / Row Spacing: The amount of space, in pixels, between the columns and rows of the grid.
The Alignment setting enables you to position the components relative to the page (e.g., upper left, top, upper right, etc.). By default, the components are aligned to the center of the page.
Note: Alignment is only applicable when the Mode is set to Column or Row.
This example shows how components appear when the Alignment is set to the upper-right corner:
The Spacing setting enables you to set the amount of space between components. Select from the following sub-options to configure this property:
- Packed: Adds the amount of space you input, in pixels, between each component.
- Space between: Spaces out the components as much as possible within the parent component. This example shows how a Form component appears when you set its Spacing to Space between and the container is stretched to the height of the application.Note: Entering a value in the Spacing input field automatically changes the Spacing method to Packed.
The Wrap setting enables you to decide whether a child component that is larger than its parent wraps or continues off the page. You can set the Wrap setting to:
- False: The component overflows off the page.
- True: The component moves to the next row.
The Reverse Direction setting determines the order in which components appear in your application. You can set the Reverse Direction to:
- False: Displays the components as you added them to your application.
- True: Reverses how the components are arranged in your application.
Last modified 1mo ago