Example script layouts

You can create complex page layouts by mixing or nesting horizontal and vertical containers. For example, if you add three horizontal stacks to the default vertical stack, then each horizontal stack is a row that can contain some combination of components:

Figure shows how 3 horizontal stacks can be used to layout rows of input fields.

Example 1: Create a layout that places fields in rows

  1. Place a row of items in a parent horizontal stack, which is itself inside the root vertical stack container.

    example2_nested_horizontal_stacks2

  2. Select the horizontal stack, and copy it to the clipboard.

  3. Select the root container by clicking its icon.

  4. Click Paste to create an additional row. Repeat the previous steps to add additional rows as needed.

    Figure shows 3 horizontal rows of components in a vertical stack

Example 2: Position labels above components

To position labels above components, add vertical stacks to a horizontal stack container:

example3_nested_vertical_stacks2

There are many possible combinations. As a best practice, select the parent container before adding a component to it.