Skip to main content

Building Layouts

Buildocs UI Engine uses the Row Widget as the primary layout tool. Rows divide the canvas horizontally into segments, letting you place multiple widgets side by side on the same line.

The Row Widget​

A Row is a horizontal container that splits its width into one or more segments. Each segment holds a single widget.

Rows can be placed:

  • Directly on the canvas — to lay out widgets at the top level of the form
  • Inside a TabBox tab panel — to lay out widgets within a tab
info

Rows cannot be nested inside other rows or inside a Table.

Responsive Scaling​

Core feature

Forms built with Rows are automatically scaled on smart devices (phones and tablets). You do not need to configure breakpoints or write custom styles — the layout adjusts to the available screen size without any extra steps.

Adding a Row to the Canvas​

  1. Open your form in the Form Builder
  2. Locate the Row widget in the component palette
  3. Drag the widget onto the canvas and drop it in the desired position
  4. The row is added with a single segment by default

Creating Segments​

By default a new row has one segment that spans the full width. To add columns:

  1. Select the Row on the canvas
  2. Open the Properties Panel
  3. Change the Segment Count property to the number of columns you want (e.g., 2 for a two-column layout, 3 for three columns)

By default all segments share the row width equally. Segment widths can be adjusted individually — see Controlling Segment Widths below.

Selecting a Segment​

Each segment is individually configurable. How you select it depends on whether it is empty or occupied:

  • Blank segment — click directly on the segment. It becomes selected and its properties appear in the Properties Panel.
  • Segment containing a widget — hover over the segment to reveal a bold left border. Click that border to select the segment. This lets you configure segment-level properties without accidentally selecting the widget inside.
tip

To configure the widget inside a segment, click the widget. To configure the segment itself, use the bold left border on hover.

Controlling Segment Widths​

By default, all segments have equal width. You can adjust the relative width of each segment using the Flex-grow property:

  • All segments at Flex-grow: 1 → equal widths
  • One segment at Flex-grow: 2, others at 1 → that segment takes twice as much space

You can also set a Min-width on any segment to prevent it from shrinking below a certain size (e.g., 120px).

Placing Widgets in Segments​

Drag any widget from the component palette and drop it into a segment. Each segment holds exactly one widget — dropping a second widget into an occupied segment is not allowed.

Supported inside a Row segment:

  • Input
  • Textarea
  • Select
  • Checkbox
  • Radio
  • Button
  • Label
  • File Uploader

Not supported inside a Row segment:

  • Row (rows cannot be nested)
  • TabBox
  • Table

Common Layout Patterns​

Two-column form​

Place a Row with Segment Count: 2 and drop one field into each segment. Both segments share the width equally by default.

[ First Name        ] [ Last Name         ]

Three-column form​

Place a Row with Segment Count: 3. To make City wider than State and ZIP, set City's Flex-grow to 2 and leave the others at 1.

[ City                    ] [ State ] [ ZIP ]

Mixed rows​

Stack multiple rows on the canvas. Each row is independent and can have a different segment count.

[ Full Name                               ]   ← Row with 1 segment
[ Street Address                          ]   ← Row with 1 segment
[ City              ] [ State  ] [ ZIP    ]   ← Row with 3 segments

Layout inside a tab​

Add a TabBox to the canvas, then drag Rows into individual tab panels to arrange fields within each tab.

Tab: Contact Info
  [ Email                ] [ Phone        ]

Tab: Address
  [ Street                                ]
  [ City         ] [ State    ] [ ZIP     ]