Layout & Positioning

This article describes the layout and positioning properties, including XY positioning, width, height, vertical and horizontal alignment.

As of version 1.18, all Size and Position properties have been placed into a Layout & Positioning section in all component properties, along with the addition of two alignment properties - Horizontal Alignment and Vertical Alignment

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

Once Horizontal Alignment has been set, components cannot be dragged/ moved left or right along the canvas, and will only move up or down.

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

Once Vertical Alignment has been set, components cannot be dragged/ moved up or down along the canvas, and will only move left or right.

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.

In this example, the Text Label 1 component is aligned to the left side of the canvas, and its vertical alignment is stretched to fit the height.

A brief description appears at the bottom of the alignment properties, explaining the current settings for the component alignment.