FormLayoutItemBase.ColSpanXxl Property

Specifies the number of columns an item, a group, or a tab page container occupies in viewports (1400px or wider).

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

[DefaultValue(0)]
[Parameter]
public int ColSpanXxl { 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 ColSpanXl value.

Remarks

The Form Layout uses a responsive grid system based on the CSS flexible box layout to render items. Each layout item can occupy 1-12 columns. The following properties specify the item width for six different viewport sizes:

Viewport Size	Extra Small	Small	Medium	Large	Extra Large	Extra Extra Large
Width in Pixels	Any	≥576	≥768	≥992	≥1200	≥1400
Property	ColSpanXs	ColSpanSm	ColSpanMd	ColSpanLg	ColSpanXl	ColSpanXxl

Note the following specifics:

• If you specify item widths starting with a certain size, the item occupies 12 columns in smaller viewports.
• If you specify multiple ColSpan* properties, the property for the largest applicable viewport size takes precedence. If it is not set, the property for the next smaller size applies. This process continues until the component finds a defined property.
• If you do not specify any ColSpan* property, the component applies the default values for the ColSpanMd property: 6 for an item and 12 for a group or tab page container.

The following example specifies item widths for different viewport sizes:

<DxFormLayout>
    @* If the viewport width is less then 768px (medium), the item occupies 12 columns *@
    @* If the viewport width is from 768px (medium) to 1200px (extra large), the item occupies 6 columns *@
    @* If the viewport width exceeds 1200px (extra large), the item occupies 4 columns *@
    <DxFormLayoutItem Caption="Name" ColSpanXl="4" ColSpanMd="6">
        <DxTextBox />
    </DxFormLayoutItem>
</DxFormLayout>

Form Layout renders all layout items in a single container. An item moves to the next row if the current row does not have enough space to render it. Enable an item’s BeginRow property to always place the item in a new row.

razor

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