Layout Widgets
,
,
,
,
These types of widgets belong to the Layout category in the widget library. They are used to define the position of widgets in the app.
To make positioning easier, the screen is divided into rows, each virtually separated into a maximum of 12 columns of equal width. Depending on the size of the device (e.g. computer screen, smartphone, tablet or TV), a widget can occupy all 12 columns (one whole row) or several widgets can be displayed in the same row.
You can predefine the position of widgets within a row in several ways. The size of each position can be adjusted manually at a later time.
Widget | Type of utilisation | Design |
---|---|---|
![]() |
Large screen | Groups all 12 columns to position a single widget |
![]() |
Creates 2 positions with a width of 6 columns each | |
![]() |
Creates 3 positions with a width of 4 columns each | |
![]() |
Creates 4 positions with a width of 3 columns each | |
![]() |
Smartphone screen | Creates 6 positions with a width of 2 columns each
Note: Widgets can be displayed one below the other |
Notes
See General information on widgets.
- The app can occupy an unlimited number of rows.
Caution
- If you delete a row, all of the widgets placed in it will automatically be deleted.
Best practice
- Create a restore point using
before modifying the widget's properties and layout.
Procedure: How to define the position of widgets
1. Click in the Objects pane.
2. Click and drag one of the widgets from the Layout category ,
,
,
,
to the Design pane.
- In a new page, the Design pane will display the first row with the words Drop a Layout Widget Here.
- The positions available will appear in green with the words Drop Here.
- The row is divided into the number of equal-width columns corresponding to the selected widget.
3. You can define the columns below a position.
Step 1 | Step 2 |
---|---|
![]() |
![]() |
4. You can make modifications to the position in the Design pane:
- To increase the width of a position, click
in the toolbar of the right column.
Step 1 | Step 2 |
---|---|
![]() |
![]() |
- To reduce the width of a position, click
in the toolbar of the left column.
Step 1 | Step 2 |
---|---|
![]() |
![]() |
- To delete the positions within a row, click
in its toolbar. Caution: All of the widgets in the row will be deleted.
Step 1 | Step 2 |
---|---|
![]() |
![]() |
- To delete a position, click
in its toolbar. Caution: The widget found in this position will be deleted.
Step 1 | Step 2 |
---|---|
![]() |
![]() |
- To move a row, click
in its toolbar.
Step 1 | Step 2 | Step 3 |
---|---|---|
![]() |
![]() |
![]() |
- To divide a column into 2, click
in its toolbar.
Step 1 | Step 2 |
---|---|
![]() |
![]() |