Container

The Container component is a basic layout element and is used to horizontally align the layout of your window components using columns. The Container is based on a grid system with 12 columns.

The Container:

• Cannot be placed inside another container.
• Can be placed inside other components, such as a Panel and Panel with tabs to align components horizontally.
• Adapts to different screen sizes.
• Width can be fluid (100% of its parent) or fixed.

Examples

You can use a Container component to create the following layout with two columns that are divided 30%-70% across the screen width. Where:

• The first column contains a Text input component.

• The second column contains another Container component with three columns to align Dropdown components as follows:

  • First column three stacked components
  • Second column one component
  • Third column one component

The example below shows another use of the Container component creating a layout with four columns placed inside the content section of a Panel component to align three Dropdown components and a Radio component.

Properties

The following Container properties are available:

Main

Property	Description	Required
Fluid	Select the checkbox to make the container cover the full width of the browser window, even if resized, with no margins on the left or right side.	No
Columns	Sets the number of columns in the Container. See Columns for more details.	Yes

Interactions

Property	Description	Required
Hidden	Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel.	No
Add rule	You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances.	No

Note: See Add rules to trigger properties for more details on how to set rules to the property.

Columns

Columns are used to divide the screen into vertical sections into which you place the various screen components. The Container has the following column options:

• 1 column - (default)
• 2 columns (50%/50%)
• 2 columns (30%/70%)
• 2 columns (70%/30%)
• 3 columns
• 4 columns
• 6 columns
• 12 columns

How the columns are distributed across the container width for each option is shown below:

Note:

• If you decrease the number of columns, the columns to the right and their content will be deleted.
• You cannot move a column outside its parent container.

Drag and drop

• The example below shows content being moved from one column to another:

• The example below shows columns being rearranged within their parent container.