Container Layout

A container layout helps you to create a complex layout of your choice in a simple and easy way. When a container layout control is added, a single container is available by default. Additional containers can be added by clicking on "+" icon in the canvas.

The containers within the container layout can be repositioned by simply dragging the container and dropping in any place within the layout. Containers can be re-sized by dragging the container's corner. A container can be deleted by selecting the container and pressing the keyboard 'delete' or alternatively from the tree view.

The container layout control has 2 sets of properties. One for the container layout and the other for each of the containers within the layout.

Note:

Recommendation

Container layouts are best used at a page level when you wanted to create a layout for a page with different sections. For aligning and positioning of controls within a page, we suggest using Containers

Important: Avoid Nested Container Layouts. It is recommended to avoid nested container layouts for ease of maintenance and consistency between design time and runtime.

Container Layout Properties

General

• Tooltip - Tooltip to be displayed on the container layout. Use this to provide additional information on the control.
• Hidden- If selected, hides the control in the runtime.
• Disabled - If selected, disables the control in the runtime.

Events

No events.

Style

• Background Color - Sets the background color of the container layout.
• Font - Sets the font family for the container layout. All the containers within the layout will have the same font family as that of the layout.
• Margin- Sets the margin of the layout. By default 0px margin is set. Top/Bottom and Left/Right margin properties are combined. These properties can be unlinked using the unlink button on the right side of the Margin section heading.
• Padding - Sets the padding of the layout. By default 0px padding is set. Top/Bottom and Left/Right padding properties are combined. These properties can be unlinked using the unlink icon on the right side of the padding section heading if different padding values needed to set for each side.
• Size - The width and height of the layout can be set in the size section. The default width is set to 100%. The height of the layout adjusts automatically based on the containers within them as it is set to 'Auto'.

Container Properties

General

• Hidden- If selected, hides the control in the runtime.
• Disabled - If selected, disables the control in the runtime.

Events

• Clicked on - Configure what happens when the container is clicked.

Style

• Layout - Determine how the controls within the container are positioned:

  • Direction (Horizontal/Vertical) - Controls are arranged one below the other (vertical) or side by side (horizontal).
  • Alignment- Controls alignment within the template ( Left, Center, Right & Stretch for Vertical direction and Top, Middle, Bottom, Stretch for Horizontal direction).
  • Justify- Top, Middle, Bottom & Distribute for Vertical direction and Left, Center, Right & Distribute for Horizontal direction.
  • Allow wrapping - if enabled, wraps the control in the container if there isn't enough space.
• Background Color - Sets the background color of the container.
• Border - Sets the border for the control. Border Thickness, Border Color, and Corner Radius can be configured for the border.
• Font - Sets the font family for the container. All the controls within the container will have the same font family as that of the container.