FormLayoutItemBase.ColSpanSm Property

Specifies the number of columns an item, a group, or a tab page container occupies on small screens (576px or wider).

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(0)]
[Parameter]
public int ColSpanSm { get; set; }

Property Value

Type	Default	Description
Int32	0	The number of columns from 1 to 12. Default value: 0 - the number of columns is equal to the ColSpanXs value.

Remarks

Form Layout uses a responsive grid system based on the CSS flexible box layout to render items. Each layout item can occupy between 1 and 12 columns. This value can be defined separately for six different container size types (screens) as listed below:

Container Size	Extra Small	Small	Medium	Large	Extra large	Extra Extra large
Width	any	≥576px	≥768px	≥992px	≥1200px	≥1400px
Property	ColSpanXs	ColSpanSm	ColSpanMd	ColSpanLg	ColSpanXl	ColSpanXxl

Use the ColSpanSm property to specify the number of columns occupied by the item in containers that are 576px or wider.

<DxFormLayout>
    <DxFormLayoutItem Caption="Address:" ColSpanSm="9">
        <DxTextBox @bind-Text="@Address" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Postal/ZIP Code:" ColSpanSm="3">
        <DxTextBox @bind-Text="@ZipCode" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Country:" ColSpanSm="4">
        <DxTextBox @bind-Text="@Country" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Name:" ColSpanSm="7" BeginRow="true">
        <DxTextBox @bind-Text="@Name" />
    </DxFormLayoutItem>
</DxFormLayout>

Form Layout renders all layout items in a single container. An item moves to the next row if there is not enough space in the current row. You can use an item’s BeginRow property to explicitly indicate that it should be placed onto a new row.

The ColSpanSm property is applied in containers equal to or wider than 576px until another value is specified for a wider container. If the ColSpan value is not specified for containers under 576px, in such containers an item occupies all 12 columns.

@*For containers up to 768px (medium), the item occupies 12 columns*@
@*For containers from 768px (medium) to 1200px (extra large), the item occupies 6 columns*@
@*For containers 1200px (extra large) and wider, the item occupies 4 columns*@
<DxFormLayoutItem Caption="Country:" ColSpanMd="6" ColSpanXl="4"> ... </DxFormLayoutItem>

If no one ColSpan* property is specified, the component applies the default values for the ColSpanMd property: 6 for an item and 12 for a group or tab page container.