DxPopupBase.SizeMode Property

Specifies the size of the component and its content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[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 DxPopup component and its content. For more information, refer to the following topic: Size Modes.

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

Razor

<div class="target-container" @onclick="@(() => PopupVisible = true)">
    <p class="target-caption">CLICK TO SHOW A POP-UP WINDOW</p>
</div>
<DxPopup @bind-Visible="@PopupVisible"
         ShowFooter="true"
         HeaderText="Edit Contact"
         SizeMode="SizeMode.Large">
    <BodyContentTemplate>
        <SampleEditForm/>
    </BodyContentTemplate>
    <FooterContentTemplate>
        <DxButton RenderStyle="ButtonRenderStyle.Primary" Text="OK" Click="@(() => PopupVisible = false)" />
        <DxButton RenderStyle="ButtonRenderStyle.Secondary" Text="Cancel" Click="@(() => PopupVisible = false)" />
    </FooterContentTemplate>
</DxPopup>

@code {
    bool PopupVisible { get; set; }
}

SampleEditForm.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: Popup - Customization