DxDropDown.SizeMode Property

Specifies the size of the component and its content.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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

Property Value

Type	Default	Description
Nullable<SizeMode>	null

The size mode. If the property is not specified (the value is null), the size is determined by the SizeMode global option.

Available values:

Name	Description
Small

Small size.

| | Medium |

Medium size.

| | Large |

Large size.

Remarks

The SizeMode property allows you to apply different size modes to the DxDropDown component and its content. For additional information, refer to the following topic: Size Modes.

The following code snippet applies the Large size mode to the DxDropDown component.

Razor
SampleEditForm.razor

razor

<div id="dropdown-customization-target-container">
    <DxButton
        Click="() => IsOpen = !IsOpen"
        RenderStyle="@ButtonRenderStyle.Secondary"
        aria-describedby="dropDown-customization">SHOW A DROPDOWN</DxButton>
</div>
<DxDropDown
    @bind-IsOpen="@IsOpen"
    Id="dropDown-customization"
    PositionTarget="#dropdown-customization-target-container"
    RestrictionTarget="#Navigation-DropDown-Customization"
    HeaderVisible="true"
    HeaderText="Edit Contact"
    FooterVisible="true"
    SizeMode="SizeMode.Large">
    <BodyContentTemplate>
        <SampleEditForm/>
    </BodyContentTemplate>
    <FooterContentTemplate>
        <DxButton RenderStyle="ButtonRenderStyle.Primary" Text="OK" Click="@context.CloseCallback"/>
        <DxButton RenderStyle="ButtonRenderStyle.Secondary" Text="Cancel" Click="@context.CloseCallback"/>
    </FooterContentTemplate>
</DxDropDown>

@code {
    bool IsOpen { get; set; } = false;
}

razor

<div class="d-flex flex-fill pt-1 pb-2 w-100">
    <DxFormLayout Data="@editFormData" CssClass="w-100">
        <DxFormLayoutItem Field="@nameof(FormDataItem.Name)" Caption="Contact Name:" CaptionPosition="CaptionPosition.Vertical" CaptionCssClass="popup-demo-caption" CssClass="popup-demo-item" ColSpanMd="12">
            <div class="popup-demo-layout-item">
                <span class="popup-image popup-icon-user"></span>
                <DxTextBox Text="@(((string)((ValueEditContext)context).Value))" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Field="@nameof(FormDataItem.BirthDate)" Caption="Birth Date:" CaptionPosition="CaptionPosition.Vertical" CaptionCssClass="popup-demo-caption" CssClass="popup-demo-item" ColSpanMd="12">
            <div class="popup-demo-layout-item">
                <span class="popup-image popup-icon-birthday"></span>
                <DxDateEdit Date="@(((DateTime)((ValueEditContext)context).Value))" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)" Caption="Years Worked:" CaptionPosition="CaptionPosition.Vertical" CaptionCssClass="popup-demo-caption" CssClass="popup-demo-item" ColSpanMd="12">
            <div class="popup-demo-layout-item">
                <span class="popup-image popup-icon-worked"></span>
                <DxSpinEdit Value="@(((int)((ValueEditContext)context).Value))" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Field="@nameof(FormDataItem.Position)" Caption="Position:" CaptionPosition="CaptionPosition.Vertical" CaptionCssClass="popup-demo-caption" CssClass="popup-demo-item" ColSpanMd="12">
            <div class="popup-demo-layout-item">
                <span class="popup-image popup-icon-position"></span>
                <DxComboBox CssClass="popup-demo-textbox"
                            Data="@(new List<string>() {"Sales Representative", "Designer"})"
                            Value="@(((string)((ValueEditContext)context).Value))">
                </DxComboBox>
            </div>
        </DxFormLayoutItem>
    </DxFormLayout>
</div>

@code {
    FormDataItem editFormData = new() {Name = "Nancy Davolio", BirthDate = DateTime.Now.AddYears(-30), YearsWorked = 3, Position = "Sales Representative"};
}

Run Demo: DropDown - Customization