Section & SectionColumn

The Section and SectionColumn components provide a responsive multi-column layout for organizing form fields and content. Columns are laid out horizontally and automatically wrap to the next row when the available width is constrained.

Columns

Place one or more SectionColumn components inside a Section. The columns distribute evenly across the available width. Use ColumnCount to explicitly set the number of columns (1-4); if omitted, it defaults to the number of SectionColumn children.

Column Minimum Width

Set ColumnMinWidth on the Section to control when columns wrap to the next row. When the available width per column falls below this threshold, columns stack vertically. Defaults to 340px.

Column Widths

Use Width on a SectionColumn to give it a larger or smaller share of the row. Widths are ratios, not CSS percentages: three columns with Width="3", Width="4", Width="3" lay out as 30% / 40% / 30% (3 + 4 + 3 = 10 parts). Columns without a Width fall back to the default equal distribution.

Headers & Footers

Both Section and SectionColumn support HeaderText/Header and FooterText/Footer parameters. Use HeaderText for simple text headings or Header for custom render fragment content.

Borders

Set BorderVisible="true" on a Section or SectionColumn to display a border around it. Borders can be set independently on the section and each column.

Content Orientation

By default, editor components inside a SectionColumn are stacked vertically. Set ColumnContentOrientation="ComponentOrientation.Horizontal" to lay them out horizontally instead. Use HorizontalGap and VerticalGap to control spacing between items.