, , , ,  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