Layout & Positioning

Finding the properties

All Layout & Positioning properties can be found in the top section of any components' properties panel.

XY Positions

The XY positioning of a component is determined by the component's top left corner of its bounding box.

These properties will shift the components along their respective X and Y axes. Any change to the X Position will move the component left and right; any changes to the Y Position will move the component up and down.

If a component is dragged along the canvas, then the values in the inputs will live update to display their new position.

Alignment

A new property added in 1.18, Alignment allows components to have fixed alignments to points on the canvas, both Vertically and Horizontally.

Horizontal Alignment

Horizontal Alignment sets components to have a fixed position on the canvas. This can be:

• Left - fixes the position to the left side of the canvas

• Center - fixes the position to the center of the canvas

• Right - fixes the position to the right of the canvas

• Stretch - stretches the width of the component to fit the canvas width

Vertical Alignment

Vertical Alignment sets components to have a fixed position on the vertical axis of the canvas. This can be:

• Top - fixes the position to the top of the canvas

• Middle - fixes the position to the middle of the canvas

• Bottom - fixes the position to the bottom of the canvas

• Stretch - stretches the height of the component to fit in the canvas height

A graphic will appear beside the alignment properties, once an alignment has been selected, to indicate the current behavior of the selected component.

Multi-alignment

When applying multiple alignments to components, a graphic will appear beside the properties to indicate the current alignment set.