Containers

Containers define the appearance and flow for large areas of the user interface.  The most common and basic configurator page layout is one simple list of fields, elements, and buttons read from the top down.  In many cases, this simple and straightforward design is appropriate.  However, containers are useful to create multi-column layouts, or to change the direction of how page items flow to fill the screen.

Example UI	Containers used to create this UI
	None.  The default flow of a page is seen here: each item takes up the full horizontal space, and they appear top-to-bottom.
	Create a "row" container with horizontal layout, and place the fields within the container.  Now those same fields appear left-to-right.
	Containers are themselves a layout object, so you can nest containers within containers to create a sophisticated UI, like this grid example. Create a "table" container with vertical layout. Create a "row" container with horizontal layout. Place text or fields into that row.  For each item in that row, set the "relative size" to x1 through x6 so each item is sized properly.  Here, for example, the first text item is sized x2 and the rest of the checkbox fields are sized x1.  The checkbox fields in this example have the field property "show label" set to false. Drag your row container into the table container. Clone that row container to create as many rows as you need.  In this example, we see 4 rows (one header row, and 3 data rows).
	Grids can also be built in the other direction, where a "column" container is repeated as many times as necessary. The sky's the limit!  Create as complex a UI as you need to gather the information required.

Add a Container

To add a container to your UI, first select any existing layout element in the design tree as the parent of the container. Then click on the '+' button. Select "Container".

Container Properties 

Property	Description
Name	A name which is shown in the design tree and referenced in Snap rules. The name must be unique within the configurator.
Placeholder for configurator content	This property does not appear when designing a configurator. It appears only when designing a configurator layout. Setting this flag on a container in a configurator layout allows any administrator who uses that layout to customize the contents within it for a specific configurator. Learn more about placeholders in configurator layouts.
Visible	Show or hide this element from display.
Item Layout	Specify how multiple items inside this container will appear on-screen: Horizontal Items will flow left-to-right. Vertical Items will flow top-to-bottom. Absolute Items will not flow, and appear in precise positions you specify.  If items overlap, the "order" attribute of the items determines which appears on top.
Item Alignment	Controls how the items of the container are aligned in the cross axis of the layout. If ItemLayout is set to horizontal, then this controls the vertical alignment of the items. If ItemLayout is set to vertical, then this controls the horizontal alignment of the items. start the item will appear at the start of the cross axis center the item will appear in the center of the cross axis end the item will appear at the end of the cross axis stretch the item will stretch across the entire cross axis, if possible.  If the item size cannot be adjusted, it will appear centered.
Item Justify	Controls how the items of the container are aligned in the main axis of the layout.  For example, if Item Layout is set to horizontal, then this controls the horizontal alignment of the items.  If Item Layout is set to vertical, then this controls the vertical alignment of the items. start the item will appear at the start of the main axis center the item will appear in the center of the main axis end the item will appear at the end of the main axis
Collapse on Mobile	Containers with horizontal flow may have so many items in them that smaller screens cannot fit the items.  Check this box to allow the container's horizontal flow to be relaxed on mobile devices, allowing items to render one beneath the other if space requires.
Scroll	If the container exceeds the size of the screen, should scrollbars appear?  In most cases, additional scrollbars confuse users.  But if required, they can be controlled here: none, for no scrollbars ever.  This is the default. auto, to have a vertical or horizontal scrollbar appear when necessary. X, to only allow a horizontal scrollbar when necessary. Y, to only allow a vertical scrollbar when necessary.

Padding Properties 

Property	Description
Padding	How much relative space should be added around the container itself?  This helps separate the container from other items around it.
Space Between Items	How much relative space should be added around each item within the container?  This helps separate each item within the container from other items in that same container.

Style Properties

Property	Description
Background Color	Containers can have a background color to help differentiate them from other items.  The colors available are defined in the overall themes of your application.
Background Color shade	After selecting a color, you can lighten or darken it to various levels.
Background Opacity	After selecting a color, you can make it more or less opaque.
Elevation	Elevation controls the size of a subtle drop-shadow that appears around the container.  The drop-shadow calls attention to the container, as it makes the container appear closer to the user.