Skip to main content

Row Widget Overview

The Row Widget is a horizontal layout container in Buildocs UI Engine. It divides its full width into one or more segments, allowing you to place multiple widgets side by side on the canvas.

Behavior​

  • Renders as a horizontal container that spans the full width of its parent
  • Divides its width across segments according to each segment's Flex-grow value (equal by default)
  • Each segment holds exactly one widget — a second widget cannot be dropped into an occupied segment
  • Automatically scales on smart devices — the layout adapts to the screen size without any additional configuration
  • Does not fire events to the backend — it is a structural element only

Placement​

A Row can be placed in two locations:

  • Directly on the canvas — creates a top-level layout row in the form
  • Inside a TabBox tab panel — creates a columnar layout within that tab
info

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

Adding to 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 or into a TabBox tab panel
  4. The row is added with a single segment by default

Supported Child Widgets​

The following widgets can be placed inside a Row segment:

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

The following are not supported inside a Row segment:

  • Row (no nesting)
  • TabBox
  • Table

Working with Segments​

After placing a Row on the canvas, each segment is individually selectable to configure its properties.

Selecting a blank segment​

Click directly on an empty segment. The segment becomes selected and its properties appear in the Properties Panel.

Selecting a segment that contains a widget​

When you hover over a segment that already holds a widget, a bold left border appears on the segment. Click that border to select the segment itself (rather than the widget inside it). The segment's properties then appear in the Properties Panel.

tip

To select the widget inside a segment, click the widget directly. To select the segment, use the bold left border that appears on hover.

Next Steps​

  • Properties — configure segment count and segment-level properties (Flex-grow, Min-width)
  • Building Layouts — guide for using Rows to structure your form