VerticalLayout (Component)

This article or section is a Stub. You can help the Neos Wiki by expanding it.

VerticalLayout component as seen in the Scene Inspector

Introduction

The VerticalLayout component is used to layout child objects in a column.

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 some effectively random process.

Usage

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.

Behavior

The VerticalLayout component places its child layout elements on top of each other. Their heights are determined by their respective minimum, preferred, and flexible heights according to the following model:

1. The minimum heights of all the child layout elements are added together and the spacing between them plus the top and bottom padding is added as well. The result is the minimum height of the VerticalLayout.
2. The preferred heights of all the child layout elements are added together and the spacing between them plus the top and bottom padding is added as well. The result is the preferred height of the VerticalLayout.
3. If the VerticalLayout is at its minimum height or smaller, all the child layout elements will also have their minimum height.
4. The closer the VerticalLayout is to its preferred height, the closer each child layout element will also get to their preferred height.
5. If the VerticalLayout is taller than its preferred height, it will distribute the extra available space proportionally to the child layout elements according to their respective flexible heights.

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

Padding and spacing

Examples

This example shows a VerticalLayout with two children. Each child is just an Image, with the first child being red and the second being green. Note that since Images have no minimum or preferred size, the VerticalLayout's ForceExpandWidth and ForceExpandHeight properties must be set, otherwise the children will simply have a width or height of zero. The VerticalLayout is as big as its parent allows.

VerticalLayout in the inspector:

The first child in the inspector:

The result:

If we add LayoutElements to each child, we can affect the sizes. Here, we add a LayoutElement to the first child, setting its FlexibleHeight to 2, and also to the second child, setting its FlexibleHeight to 1:

The result shows that the child heights are proportional, 2 to 1:

By specifying a preferred width for each child and turning off ForceExpandWidth on the VerticalLayout, we can have each child stick to its preferred width. Here, we set the first child's preferred width to 100 and the second child's preferred width to 50: