Overview
In the App Designer editor, you can configure the layout of your app to create flexible and customized designs. This includes selecting the container type for your app's main section, as well as defining the number of columns and rows within it. These layout options allow you to organize and distribute your Controls in a unique and versatile way.
Types of containers
Content
Your app includes a main section called Content, which contains all the rows and columns where your Controls are placed.
To configure its layout, click the Content section, select the Layout option, and choose a layout type for your app under the Presets label.
You can configure the layout of the Content section with the following options:
•Web page: The Section container remains undivided and spans 100% of the app's width.
•Mobile: The Section container is divided into two separate containers.
Design
You can also configure the width of the Content container.
To do so, click the Content section, select the Design option, and choose the desired width type for your app under the Width label.
The available width options are:
•Full: The Content container has no padding, allowing Section containers to span the full width.
•Boxed: The Content container includes padding, so Section containers do not occupy the full width. You can configure Horizontal alignment when this option is selected.
Section
A Section container is placed inside the Content container. It contains one or more Row containers:
•If you select the Web page layout, the Content container includes 1 Section.
•If you select the Mobile layout, the Content container includes 2 Sections.
Row
A Row container is nested within a Section container. It contains Column containers.
You can add or remove Rows based on your design needs. The number of Columns in each Row depends on the layout selected in the Content section.
Column
Column containers are placed within Row containers. They hold the Controls used in your app.
Design options
The Section, Row, and Column containers share the same design settings, which you can configure in each container's Design tab:
•Padding: Choose the spacing inside the container. Options: No-space, Compact, Normal, Wide.
•Vertical space: Defines the space between rows. Options: No-space, Compact, Normal, Wide.
•Border size: Set the border width between 0 and 5.
•Border radius: Set rounded corners using values in pixels (px) or percentages (%). You can configure each corner individually.
•Box shadow: Toggle the box shadow on or off and configure its color, direction, blur, and spread.
•Background color: Choose a background color for the section from the available preset options, or use the Color Picker tool to define a custom color. To open the picker, click the first color box beneath the Background color label.
•Border color: Select a border color for the section from the preset palette, or define your own using the Color Picker tool. Click the first color box beneath the Border color label to open the picker.
Unique Row Design options
The Row container includes the same design settings mentioned above, along with the following additional options:
•Fit height: Enables the row to adjust its height automatically based on its content.
•Vertical alignment: Defines the vertical positioning of the content within the row.
Unique Column Design option
The Column container also includes all standard design settings, with the following additional options:
•Horizontal alignment: Defines how the content inside the column is aligned horizontally.
•Column width: Determines how much space a column occupies within a row. You can set the width using the slider or enter a specific value. Available unit options include:
oPixels (px): Sets a fixed width between 230 and 2000 pixels, keeping the column size consistent across screen sizes.
oPercentage (%): Allocates a proportional width of the row, from 1% to 100%, allowing the layout to respond to different screen sizes.
oAuto: Lets the system automatically assign the column’s width based on its content and layout.
|
The minimum supported width is 230px, regardless of the selected unit or manually entered value. |
Last Updated 5/11/2025 8:11:52 PM