Alignment and Spacing

Quickly align and space out elements in your form.

Elements and containers can be quickly aligned and spaced out using the Styles tab in the right panel.

Alignment

How to align containers

You can align containers and all objects inside by modifying the Layout in the Style tab.

You'll see two kinds of alignment when you select a container;

Align self: Use this to modify the position of the selected container.

Align content: Use this to modify all the objects inside the selected container without impacting the parent container.

Create a form body container nested inside your step container to easily align the form content and set a standard width. This is especially helpful for stand-alone forms that are not embedded.

How to align elements

If you want all the objects to have the same alignment...

• Select the parent container

• Modify Align content to apply one alignment to all elements inside the container.

If you want to give a different alignment to some objects...

• Select the element directly

• Modify Align self to override the container styles for the individual element

Not seeing the alignment you applied? Check the individual object and its parent container to see if an override alignment is applied. If an object has align self modified, it may not react to align content.

Spacing

How to use gaps

You can evenly space out all objects inside a container using Gaps. A standard Gap can be added in the Layout section of the Style tab.

Gaps allow you to evenly space out objects you have already placed and any new objects added to the container.

How to use automated spacing

Use Spacing to set an automatic layout if you have multiple objects inside a container with its height set to fill or an exact pixel value.

If your objects are in a fit container, use Gaps instead. Automatic spacing also will not impact containers with a single element or container in it. Add another object to see the spacing applied.

Demo