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	By marking this element as a placeholder, you will be able to specify the children of this element in configurators that utilize this layout.  See Elements as placeholders for configurator content for more details.
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.
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.

Position

Container-based position properties appear for this interface element when it is placed within a container, giving you more control over it's position. If you place this UI element within a container, the following properties will appear. Remove it from the container, and these properties will disappear. Furthermore, the actual position properties themselves change, depending on that parent container's Item Layout.

• Not seeing any of the "Position" properties below for this UI element?
  Place this element into a container, and then return to this element's properties list. The "Position" accordion will now appear in the properties list.
  
• Not seeing the right kinds of "Position" properties for this UI element?
  Change the parent container's item layout to horizontal, vertical, or absolute. Then return to this UI element. The position properties available for items within that layout (marked by green checkmarks below) will appear.

Property	Available in a horizontal layout	Available in a vertical layout	Available in an absolute layout	Available in an absolute layout
Relative Size				auto (default) sizes the item just large enough to be drawn on-screen and no more.  The item's size is independent: No size relation exists between this item and any other items in the container. x1-x6 sizes this item in relation to any other items in the container that also have an x1-x6 relative size. For example, if a "First Name" field has a size of x1, and a "Last Name" field also has a size of x1, then they will be the same size. Change "Last Name" to x2 to make it twice the size of the "First Name" field. The item's size is dependent on other items in the container: change the xN size of another item, or change the items in the container, and this item's size changes slightly to continue to follow the size relations you've defined. When using relative sizes, try setting all items within the container to the relative size of "x1" as a starting point, and then adjust the xN levels as necessary. Mixing items with "auto" and "xN" settings is allowed, but may be difficult to manage.
Alignment				Controls how this item within a container is aligned in the cross axis of the container's layout. If the parent container's ItemLayout is set to horizontal, then this controls the vertical alignment of the items. If the parent container's ItemLayout is set to vertical, then this controls the horizontal alignment of the items. stretch the item will stretch across the entire cross axis, if possible. If the item size cannot be adjusted, it will appear centered. 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
Left Top Right Bottom Width Height				The distance between the edge of the parent container and this element. By default, each is "auto". Usually, you would set only 2 of these properties, leaving the rest to "auto", or you may distort this image or element. For example, to align an item's upper-right corner to the upper-right corner of the parent container, set "Top" to 0px, and "Right" to 0px, leaving all other distances to "auto".
Opacity				The visibility of items or backgrounds behind this item. Use any decimal number from 0 to 1. Set to 0 to make this item completely transparent. Set to 1 to make the item completely opaque.
Order				Specifies the order in which this item is drawn in the container. Use a whole number, such as 0 or 132. Default: 0. Larger numbers are drawn later, and appear closer to the user. Numbers are relative to each other: an item with order "3" will be drawn before an item with order "4".  Order numbers do not need to be consecutive: the next item could have order "50". Order numbers do not need to be unique: if two items have the same order number, such as "0", they will be shown in the order they are defined in the design tree.
Use Zero Padding				By default, UI elements have some padding around them for legibility on all devices, and for ease of use on touch-enabled devices. However, in some cases you may want specific UI elements to have no padding around them at all (to touch each other). This can be useful to create a portion of your UI which needs a very high information density. For example, to create a grid of fields that appear like cells in a spreadsheet.