UIListLayout¶
Positions sibling UI elements in rows or columns within the parent UI container.
Not implemented yet
The single highest-impact UI gap. Modern interfaces lean on automatic layout.
Workaround: Position children manually with UDim2, or write a small layout module that sets Position/Size in a RenderStepped or property-change pass.
Description¶
A UIListLayout positions sibling UI elements in rows or columns within the parent UI container, based on the FillDirection. The Position and Rotation properties of each sibling GuiObject are either ignored or overridden by the list layout, while each sibling retains its defined Size unless the layout is configured to utilize a flex layout. See List and Flex Layouts for further information.
To control the layout order of siblings, set SortOrder to either SortOrder.Name or SortOrder.LayoutOrder, then rename siblings in alphanumerical order or set their LayoutOrder value, respectively. UIListLayout will automatically re‑layout elements when elements are added/removed, or if a sibling's Name or LayoutOrder changes.
Padding between siblings is controlled through the Padding property, and wrapping within the parent container's bounds through the Wraps boolean. Alignment of siblings within the parent container is controlled through HorizontalAlignment and VerticalAlignment unless the layout is configured to utilize a flex layout.
Note that there are performance implications of using a flex‑enabled list layout, since extra calculations are needed to calculate flex basis sizes, flexed sizes, and line wrapping. Flex is enabled on a UIListLayout when the following properties are set, or if any GuiObject sibling has a UIFlexItem parented to it:
- HorizontalFlex and/or VerticalFlex are not set to UIFlexAlignment.None.
- ItemLineAlignment is not set to ItemLineAlignment.Automatic.
- Wraps is
true.
Inheritance¶
Object → Instance → UIBase → UIComponent → UILayout → UIGridStyleLayout → UIListLayout
Properties¶
| Member | Signature | Summary |
|---|---|---|
HorizontalFlex |
HorizontalFlex: UIFlexAlignment |
Controls how to distribute extra horizontal space. |
HorizontalPadding |
HorizontalPadding: UDim |
— |
ItemLineAlignment |
ItemLineAlignment: ItemLineAlignment |
In a flex layout, defines the cross-directional alignment of siblings within a line. |
Padding |
Padding: UDim |
Amount of free space between each element. |
VerticalFlex |
VerticalFlex: UIFlexAlignment |
Controls how to distribute extra vertical space. |
VerticalPadding |
VerticalPadding: UDim |
— |
Wraps |
Wraps: bool |
Controls whether siblings within the parent container wrap. |
Roblox reference: UIListLayout
Generated from Nova's API dump and Roblox creator-docs. Nova-only members come from the engine's reflection metadata.