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.
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.
