Component:HorizontalLayout

This page contains changes which are not marked for translation.

Component image

**HorizontalLayout** component as seen in the Scene Inspector

Introduction

The HorizontalLayout component is used to layout child UIX element slots in a row, left to right.

The order of the objects depends on each child's OrderOffset property. Normally these are 0, but if you change it, the children will be ordered by increasing OrderOffset, with children of equal OrderOffset being ordered by the time they were added to that parent slot.

If you want to layout the UIX elements vertically, use the VerticalLayout component instead.

Fields
Name	Type	Description
`persistent`	Bool	Determines whether or not this item will be saved to the server.
`UpdateOrder`	Int	Controls the order in which this component is updated.
`Enabled`	Bool	Controls whether or not this component is enabled.
`PaddingTop`	Float	The padding to add, in pixels, at the top of the entire layout.
`PaddingRight`	Float	The padding to add, in pixels, at the right of the entire layout.
`PaddingBottom`	Float	The padding to add, in pixels, at the bottom of the entire layout.
`PaddingLeft`	Float	The padding to add, in pixels, at the left of the entire layout.
`Spacing`	Float	The padding to add, in pixels, between each object.
`HorizontalAlign`	LayoutHorizontalAlignment	The horizontal alignment to use for the child objects in the layout.
`VerticalAlign`	LayoutVerticalAlignment	The vertical alignment to use for the child objects in the layout.
`ForceExpandWidth`	Bool	Whether to force the children to expand to fill the available horizontal space.
`ForceExpandHeight`	Bool	Whether to force the children to expand to fill the available vertical space.

Usage

The HorizontalLayout component places its child layout elements next to each other, side by side. Their widths are determined by their respective minimum, preferred, and flexible widths according to the following model:

The minimum widths of all the child layout elements are added together and the spacing between them is added as well. The result is the minimum width of the HorizontalLayout.
The preferred widths of all the child layout elements are added together and the spacing between them is added as well. The result is the preferred width of the HorizontalLayout.
If the HorizontalLayout is at its minimum width or smaller, all the child layout elements will also have their minimum width.
The closer the HorizontalLayout is to its preferred width, the closer each child layout element will also get to their preferred width.
If the HorizontalLayout is wider than its preferred width, it will distribute the extra available space proportionally to the child layout elements according to their respective flexible widths.

For minimum, preferred, and flexible heights of child slots, use LayoutElement.

Examples

Videos

ProbablePrime's tutorial video on the Horizontal Layout:

Related Components