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.

XML Fields

  • XPath establishes the data context used by the row and its child columns.
  • Type selects Field or Section; Collapsing selects None, Expanded, or Collapsed for the initial section state. FitHeight controls fixed-height behavior.
  • Label/Content supplies the optional row title. Style contains the row presentation settings.
  • Each Columns/Column defines a responsive grid area. XPath establishes its data context; HtmlClass identifies its presentation; WidthXS, WidthSM, WidthMD, and WidthLG set its width at the respective screen sizes; Align sets content alignment.
  • Controls contains the widgets rendered in that column. Rules contains rules applied to the row.

The row is a layout container. Its own XPath and each column's XPath only establish context for their child widgets; neither creates an input by itself.

RowContent Fit Height

Example

Row content with a single column.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<RowContent XPath="" Type="Field" Collapsing="None" FitHeight="False">
    <Rules />
    <Label>
        <Content><![CDATA[My Label]]></Content>
    </Label>
    <Columns>
        <Column XPath="" HtmlClass="" WidthXS="0" WidthSM="0" WidthMD="0" WidthLG="0" Align="Left">
            <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
<RowContent XPath="" Type="Field" Collapsing="None" FitHeight="False">
    <Rules />
    <Label>
        <Content><![CDATA[My Label]]></Content>
    </Label>
    <Columns>
        <Column XPath="" HtmlClass="" WidthXS="0" WidthSM="0" WidthMD="6" WidthLG="0" Align="Left">
            <Controls />
        </Column>
        <Column XPath="" HtmlClass="" WidthXS="0" WidthSM="0" WidthMD="6" WidthLG="0" Align="Left">
            <Controls />
        </Column>
    </Columns>
</RowContent>