Container, Autofit Container and Form Differences (9 min)
Completion requirements
01 Getting Started
This tutorial covers the differences between container, auto-fit container, and form elements, including:
Container overview.
Regular containers.
Autofit containers.
Form overview.
02 Container Overview
A container is a box that you can insert elements into. When changing the alignment of elements, the alignment will be relative to the container and not the entire strip. Containers are useful to create page sections with a grouping of elements.
You can create styling specific to that container and use elements that create visual interest for your users, for example, a flip container.
There are several containers to choose from but this tutorial will cover regular, autofit and form only.
You can create styling specific to that container and use elements that create visual interest for your users, for example, a flip container.
There are several containers to choose from but this tutorial will cover regular, autofit and form only.
03 Where to Find Containers
1. Click the + icon to open the element menu.
2. Click the Containers tab.
2. Click the Containers tab.
04 Regular Container
You can place elements inside the regular container freely, this means that you will need to use the alignment and spacing tools to ensure your element spacing is consistent. Using the styling menu, you can create a custom style to make the container display as a distinct section of the web page.
05 Autofit Container
The autofit container automatically stacks any elements inside of it. You can choose between a vertical or horizontal stack. Each time a new element is added, a new row is added. Only one element is inserted per row. The container will automatically adjust according to the data displayed.
To insert more than one element per row, the elements must first be inserted into a regular container. The regular container is then inserted into the autofit container.
The autofit container is useful when you require a simple layout for your web page. Using the element styling menu, you can insert set spacing between each element.
To insert more than one element per row, the elements must first be inserted into a regular container. The regular container is then inserted into the autofit container.
The autofit container is useful when you require a simple layout for your web page. Using the element styling menu, you can insert set spacing between each element.
06 Form
The form element is found under the Form tab. These structured forms enable you to add input or text fields to cells in a few clicks. You can design the form, add conditional logic, or merge cells in a row to suit your requirements. Make sure you read this informative article about the Form element to gain more in-depth knowledge.
When you first add a form to your project, a popup displays for you to configure the dimensions of your form. You can make changes to these dimensions once your form is inserted.
To make changes to your form, use the + icons to add columns and rows. Click the kebab menu to make custom changes.
Elements will be organized into the form cells for a uniform appearance. The form will automatically resize depending on the amount of data displayed. This is useful when displaying dynamic data.
Using the element styling menu, you can customize how the form displays.
When you first add a form to your project, a popup displays for you to configure the dimensions of your form. You can make changes to these dimensions once your form is inserted.
To make changes to your form, use the + icons to add columns and rows. Click the kebab menu to make custom changes.
Elements will be organized into the form cells for a uniform appearance. The form will automatically resize depending on the amount of data displayed. This is useful when displaying dynamic data.
Using the element styling menu, you can customize how the form displays.