Column Layout

This article describes the Column Layout component and its properties.

The Column Layout component is a 'parent' container component that holds multiple 'child' containers in a column-based format. This allows for uniform component placement to create consistent designs.

Select Column Layout from the containers category of the component library. Move the mouse cursor over the canvas and click on the position you would like to add a Column Layout component to your project:

The behavior and appearance of the Column Layout are very similar to the single container component. Refer to the how-to article on the Container for information on its core functionality.

Column Layout Properties

The Column Layout properties consist of GENERAL and DYNAMIC VISIBILITY drawers. This guide will describe the general properties only; the dynamic visibility properties are generic to each component and a separate guide and tutorial on dynamic visibility can be found here.

---

GENERAL

• Background - When checked, the background of the selected container column will be filled with a color that matches the value entered in the property field. This can be set in 3 ways:

  • Clicking the colored rectangle next to the Fill checkbox and using the color picker

  • Typing in a color value

  • Binding to a color value in a spreadsheet cell

• Opacity – This determines the transparency of the background of the text label. This is only available when the Fill checkbox is checked. Opacity can be set in 3 different ways:

  • Using the spinner buttons

  • Typing in a value

  • Binding to value in a spreadsheet cell

• Padding – This property defines the space between the selected container column border and the selected container column content. It can be set in 3 ways:

  • The blue button indicates the current selection.

  • Typing in a value.

  • Binding to value in a spreadsheet cell.

• Individual Padding - select this property to apply different amounts of padding to each of the component's edges. Each of these individual inputs can be manually edited or bound to the spreadsheet.

• Enable Scrollbars - Select the checkbox beside ‘Enable Scrollbars’ to allow scrolling within the container.

• Columns - a list of columns that are displayed within the Column Layout container. Columns can be deleted by selecting the 'trash can' icon, or added by selecting the '+' icon in the top right corner of the list.

---

Using the Column Layout container

The Column Layout container is like the standard container component, but it offers more scope for creating layouts. The Row Layout container works in the same way, just with a different orientation.

The Column Layout container is particularly useful when you need to align content vertically with ease. It allows components within the container to maintain their positions automatically as the container resizes, ensuring a consistent and orderly presentation of components. This feature is particularly advantageous for creating responsive designs that need to work seamlessly across different screen sizes. Additionally, the container supports manual adjustments to the size and position of each component, providing further flexibility in design.