Row Layout
This article describes the Row Layout component and its properties.
Last updated
Was this helpful?
Learn Section
This article describes the Row Layout component and its properties.
Last updated
Was this helpful?
The Row Layout component is a 'parent' container component that holds multiple 'child' containers in a row-based format. This allows for uniform component placement to create consistent designs.
Select Row 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 Row Layout component to your project:
The behavior and appearance of the Row Layout are very similar to the single container component. Refer to the how-to article on the Container for information on its core functionality.
The Row 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.
Background - When checked, the background of the selected container row 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 row border and the selected container row 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.
Rows - a list of rows that are displayed within the Row Layout container. Rows can be deleted by selecting the 'trash can' icon, or added by selecting the '+' icon in the top right corner of the list.
The Row Layout container is like the standard container component, but it offers more scope for creating layouts. The Column Layout container works in the same way, just with a different orientation.
The Row Layout container is particularly useful when you need to align content horizontally 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.
