Size Modes

• Jun 06, 2023
• 2 minutes to read

You can apply different size modes to DevExpress Blazor components and their elements.

Components That Support Size Modes

Control	API	What It Affects
Accordion	SizeMode	The entire control.
Button	SizeMode	The entire control.
Context Menu	SizeMode	The entire control.
Data Editors	SizeMode	The entire control.
DropDown	DxSizableComponentBase.SizeMode	The control and its content.
Flyout	DxSizableComponentBase.SizeMode	The control and its content.
Grid	SizeMode	The control and its inner components.
Form Layout	SizeMode	The control and its inner components.
Loading Panel	SizeMode	The entire control without covered content.
Menu	SizeMode	The entire control.
Pager	SizeMode	The entire control.
Popup	DxSizableComponentBase.SizeMode	The control and its content.
Rich Edit	GlobalOptions.SizeMode	Toolbar, ribbon, dialogs, and context menu.
Scheduler	InnerComponentSizeMode	Toolbar, view selector, appointment form, and data editors.
Tabs	SizeMode	The entire control.
Toolbar	SizeMode	The entire control.
TreeView	SizeMode	The entire control.
Wait Indicator	SizeMode	The entire control.
Window	DxSizableComponentBase.SizeMode	The control and its content.

Example

The code below applies different size modes to ComboBox components.

<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Small" />
<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Medium" />
<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Large" />

@code {
    IEnumerable<string> Cities = new List<string>() {
        "London",
        "Berlin",
        "Paris",
    };
    string Value { get; set; }
}

Global Size Mode Property

Use the SizeMode application-wide option to specify the size mode for DevExpress Blazor components that support size modes. Individual component settings override this option.

You can specify a size mode in the Blazor Project Wizard.

The wizard adds the SizeMode global option in the Program.cs file.

Program.cs

builder.Services.AddDevExpressBlazor(options => {
    options.SizeMode = DevExpress.Blazor.SizeMode.Small;
});