Overview
In the App Designer editor you can configure the layout of your app. There are several ways to configure the layout of your app, you can choose the type of container for the main container of you app. Also, you can define the number columns and rows within the main containers of your app, in order to achieve more versatile designs. This gives you the ability to use the configured columns and rows to distribute your Controls in a unique way.
Types of containers
Content
Your app has a main section called Content, and within this section all the rows and columns with your Controls will be contained.
To do this click the Content section, select the Layout option and under the Presets label you can choose which type of layout you want for your app.
You can configure how the Content section is divided with the following options:
•Web page: the Section container of your app will not be divided and will have a width that occupies 100% of your app. For more information refer to the Web page layout article.
•Mobile: the Section container will be split into two containers. For more information refer to the Mobile layout article.
Design
You can configure the type of width for the Content container.
To do this click the Content section, select the Design option and under the Width label you can choose which type of width you want for your app.
These are the available options for the width of your app:
•Full: the Content container will not have padding so the Section containers will occupy the full width of the Content container.
•Boxed: the Content container will have padding so the Section containers will not occupy the full width of the Content container. You can choose the horizontal alignment with this option selected.
Section
This is the container contained within the Content container. The Section container has the Row containers, and the number of Section containers depends on the type of Content container.
•You will have 1 Section container if you selected the Web page layout for the Content container of your app.
•Your will have 2 Section containers if you selected the Mobile layout for the Content container of your app.
Row
This is the container contained within the Section container. The Row container has the Column containers, the amount of Column containers depends on the the type of layout of your Content container, and you can add or delete the amount of Row containers.
Column
This is the container contained within the Row container. The Column container has the Controls of your app.
Design options
The Section, Row, and Column containers have the same Design settings. You will be able to configure the following options in the Design tab of each of this containers.
•Padding: select the type of padding for the content inside the section. The options you can select are No-space, Compact, Normal, Wide.
•Vertical space: select the type of space between each row of the section. The options you can select are No-space, Compact, Normal, Wide.
•Border size: select the width size for the border of the section. You can set a value between 0 and 5 for the border size.
•Border radius: set for a value, either in pixels (px) or percentage (%), for the border radius of the section. You can also set an individual value for each corner of the section.
•Box shadow: switch option to activate the box shadow of the section. You can configure the color, direction, blur and spread of the shadow.
•Background color: background color of the section. You can select a predetermined color, or one from the color picker by selecting the first color of the the row. beneath the Background color label.
•Border color: color of the border of the section. You can select a predetermined color, or one from the color picker by selecting the first color of the the row. beneath the Border color label.
Unique Row Design options
The Row section has the same Design options as mentioned above with the addition of the following settings:
•Fit height: switch option to allow the content of the row to adjust its height to fit in the section.
•Vertical alignment: vertical alignment of the content in the section.
Unique Column Design option
The Column section has the same Design options as mentioned above with the addition of the following setting:
•Horizontal allignment: horizontal allignment of the content inside of the section.
Last Updated 6/4/2024 8:30:42 PM