The Layout control is considered the "mother layout" of any page or form. It is the most powerful under the Layout as it can stack other form controls including the Layout control in a horizontal and vertical stack. It also allows form designers to configure design-related aspects such the spacing between child controls, background-color, transparency, and orientation of forms.
In this article, you will learn how you can use the Layout control in your forms.
Step 1 - Open Page Designer
After creating a page, form, or sub form, hover over its name. Once the 'Open Page Designer' buttonappears, click on it.
Step 2 - Add the Layout Control to Your Form
From the Layout tab, drag and drop the Layout control onto your design canvas.
Step 3 - Configure the Layout Control
Upon adding the Layout control, its properties will appear on the right side of the screen.
You can customize the following properties accordingly:
Identifier | This field is for the name used to identify this specific Layout control. Add a meaningful one so you can use it in expressions. |
Background Color | Pick a color from the palette to use as the background color of the Layout. |
Height | Define the height of the Layout. |
Width | Set a width for your Layout, |
Spacing | Set a value for the spacing between child controls. |
Orientation | You can specify the orientation of your form by selecting from these two options:
|
Horizontal Options | Choose an appropriate horizontal option for the control to appear on the app screen.
|
Vertical Options | Choose an appropriate vertical option for the control to appear on the app screen.
|
Add more controls to your form and then save or publish it.
Watch How It Works
Watch this video tutorial to better understand how to arrange elements using the Layout Control in transform Studio's Page Designer.
Need more help? Contact us at support@makeen.io