Skip to content

Row Content

The RowContent widget arranges child widgets horizontally within a row, using a 12-unit grid system for responsive layout. It automatically expands to fill the width of its parent container.

Widget Type

The Type property defines the visual presentation and behavior:

  • Field: Represents a single field within a form, suitable for individual data entry elements. Occupies a smaller space.
  • Section: Represents a section within a form, grouping related fields. Occupies a larger space and is visually distinct. Sections support expand/collapse functionality.

Label

A label can be added using the Label property to provide a title for the RowContent. The label is displayed above the row content. If no label is specified, no label is displayed.

Columns and Grid Layout

RowContent uses a CSS-based 12-unit grid system. Each column's Width property specifies how many units it occupies ( e.g., a Width of 6 occupies half the row's width). Columns exceeding the available width will wrap to the next line.

Styling

The appearance of the RowContent widget can be customized using styling properties (background color, text color, font style—bold, italic). These styles can be overridden using formatting rules based on specific conditions.

Responsive Layout

Column widths can be tailored for different screen sizes (small, medium, large). The default width applies to medium screens. Widths for other screen sizes are set independently; if not specified, a screen size inherits the width from the next smaller size. To hide a column on a specific device type, set its width to 0 for that size.

Fit Height

By default, the RowContent height adjusts dynamically to accommodate its children. To fix the height, set FitHeight to true. If the content exceeds the fixed height, a vertical scrollbar will appear.

RowContent Fit Height

Example

Row content with a single column.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<RowContent Type="Field">
    <Label>
        <Content><![CDATA[My Label]]></Content>
    </Label>
    <Columns>
        <Column>
            <Controls>
            </Controls>
        </Column>
    </Columns>
</RowContent>

Example

Row content with two columns with 6-unit width each.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<RowContent Type="Field">
    <Label>
        <Content><![CDATA[My Label]]></Content>
    </Label>
    <Columns>
        <Column WidthMD="6">
            <Controls>
            </Controls>
        </Column>
        <Column WidthMD="6">
            <Controls>
            </Controls>
        </Column>
    </Columns>
</RowContent>