Application Builder - Columns element

To make interfaces easy to use, you need a good layout plan. Using columns helps you arrange your page content well.

Let’s go over how to set up column containers. This will help your interface match your data just right.

Overview

A column container serves as a foundational element in organizing your application. It allows you to arrange content for an intuitive user experience. With column containers, you gain the flexibility to structure and customize your layout.

For the column element, you can configure the element properties and style from the element settings.

Add and configure column elements

To add a column element, access the elements panel and select Columns.

Once added, place the container wherever you want it on the page. Don’t worry if it’s not perfectly positioned initially; you can always move it later.

Learn more about how to add and remove an element from a page.

After defining the column layout for your application, you can customize its appearance and behavior by configuring the container’s properties.

Column layout

The layout option varies from 1-6 columns and allows you to determine the desired arrangement of elements within your interface.

By specifying a number between 1 and 6, you define the structure and presentation of the page. This impacts how data is organized and displayed, influencing usability and visual appeal.

Space between columns

The space between columns is adjustable, ensuring optimal spacing and visual clarity within your interface.

This field’s value must be less than or equal to 2000.

Column vertical alignment

The vertical alignment for your column container element can align content at the top, middle, or bottom of the container.

• Top alignment: Selecting top alignment positions the content of the column container element at the top of the container. This is useful for situations where you want content to start from the top edge of the container.
• Middle alignment: Opting for middle alignment centers the content vertically within the column container element. It evenly distributes content, ensuring a balanced presentation.
• Bottom alignment: Choosing bottom alignment aligns the content at the bottom of the container element. This is for scenarios where you want content to end at the bottom edge of the container.