FormLayoutItemBase.ColSpanXs Property

Specifies the number of columns an item, a group, or a tab page container occupies on any screen (extra small and larger).

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
Int32	0	The number of columns from 1 to 12. Default value: 0 - the item occupies all 12 columns.

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 ColSpanXs property to specify the number of columns occupied by the item in containers of any size (extra small and larger).

<DxFormLayout>
    <DxFormLayoutItem Caption="Address:" ColSpanXs="9">
        <DxTextBox @bind-Text="@Address" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Postal/ZIP Code:" ColSpanXs="3">
        <DxTextBox @bind-Text="@ZipCode" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Country:" ColSpanXs="4">
        <DxTextBox @bind-Text="@Country" />
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Name:" ColSpanXs="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 ColSpanXs property is applied in any containers (extra small and larger) until another value is specified for a wider container.

@*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.