Size Modes

• Jun 25, 2024
• 2 minutes to read

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

Show 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	SizeMode	The control and its content.
DropDownBox	SizeMode	The control and its content.
Drawer	SizeMode	The control and its content.
Flyout	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.
PDF Viewer	SizeMode	Toolbar.
Popup	SizeMode	The control and its content.
Progress Bar	SizeMode	The entire control.
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.
Toast	SizeMode	The control and its content.
Toolbar	SizeMode	The entire control.
TreeList	SizeMode	The control and its inner components.
TreeView	SizeMode	The entire control.
Wait Indicator	SizeMode	The entire control.
Window	SizeMode	The control and its content.

Example

The following code snippet 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;
});