Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    DxFormLayout.SizeMode Property

    Specifies the size of the Form Layout and its inner components.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    #Declaration

    C#
    [DefaultValue(null)]
    [Parameter]
    public SizeMode? SizeMode { get; set; }

    #Property Value

    Type Default Description
    Nullable<SizeMode> null

    A SizeMode enumeration value.

    Available values:

    Name Description
    Small

    Small size.

    Medium

    Medium size.

    Large

    Large size.

    #Remarks

    Use the SizeMode property to specify size mode for the Form Layout component.

    The following size modes are available:

    Size mode

    Description

    Not specified (NULL)

    Form Layout and its inner components inherit their sizes from the Form Layout’s parent component. If the parent component’s size mode is not specified, Form Layout’s size is specified by the SizeMode global option.

    Large

    The size of Form Layout and its inner components is large.

    Medium

    The size of Form Layout and its inner components is medium.

    Small

    The size of Form Layout and its inner components is small.

    The following code snippet applies the Large size mode:

    Razor
    <DxFormLayout Data="@editFormData" SizeMode="SizeMode.Large">
        <DxFormLayoutItem Field="@nameof(FormDataItem.Name)" Caption="Contact Name:" ColSpanMd="6" />
        <DxFormLayoutItem Field="@nameof(FormDataItem.BirthDate)" Caption="Birth Date:" ColSpanMd="6" />
        <DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)" Caption="Years Worked:" ColSpanMd="6">
            <DxSpinEdit @bind-Value="@spinEditValue"></DxSpinEdit>
        </DxFormLayoutItem>
        <DxFormLayoutItem Field="@nameof(FormDataItem.Position)" Caption="Position:" ColSpanMd="6">
            <DxComboBox Data="@(new List<string>() { "Sales Representative", "Designer" })"
                        Value="@(((string)((ValueEditContext)context).Value))" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Field="@nameof(FormDataItem.OnVacation)" Caption="On Vacation:" ColSpanMd="6" />
    </DxFormLayout>
    
    @code {
        FormDataItem editFormData = new FormDataItem() {
            Name = "Nancy Davolio",
            BirthDate = DateTime.Now.AddYears(-30),
            YearsWorked = 3,
            Position = "Sales Representative"
        };
        int spinEditValue { get; set; }
    }
    

    FL normal size

    To override the common SizeMode value for an individual item’s editor, define an item template, add a DevExpress data editor to the item, and use the editor’s SizeMode property to specify the size.

    Razor
    <DxFormLayout Data="@editFormData" SizeMode="SizeMode.Small">
        <DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)" Caption="Years Worked:" ColSpanMd="6">
            <DxSpinEdit @bind-Value="@spinEditValue" SizeMode="SizeMode.Large"></DxSpinEdit>
        </DxFormLayoutItem>
    </DxFormLayout>
    

    For more information, refer to Size Modes.

    Run Demo: Form Layout - Overview

    See Also