Column Layout
This article describes the Column Layout component and its properties.
Last updated
Was this helpful?
Learn Section
This article describes the Column Layout component and its properties.
Last updated
Was this helpful?
Who can use this component?
The Column Layout component can be used by those with the Builder subscription plan.
For more details, see our .
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:
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.
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.
The behavior and appearance of the Column Layout are very similar to the single container component. Refer to the for information on its core functionality.
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 .
The Column Layout container is like the standard container component, but it offers more scope for creating layouts. The container works in the same way, just with a different orientation.
