Size Modes

• Dec 03, 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.
AIChat	SizeMode	The control and its content.
Button	SizeMode	The entire control.
ButtonGroup	SizeMode	The entire control.
Carousel	SizeMode	Navigation buttons.
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.
DropDownButton	SizeMode	The entire control.
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.
Message Box	SizeMode	The control and its content.
Pager	SizeMode	The entire control.
PDF Viewer	SizeMode	Toolbar.
Pivot Table	SizeMode	The control and its content.
Popup	SizeMode	The control and its content.
Progress Bar	SizeMode	The entire control.
Ribbon	SizeMode	The entire control.
Rich Edit	GlobalOptions.SizeMode	Toolbar, ribbon, dialogs, and context menu.
Scheduler	InnerComponentSizeMode	Toolbar, view selector, appointment form, and data editors.
SplitButton	SizeMode	The entire control.
Splitter	SizeMode	The control and its content.
Tabs	SizeMode	The entire control.
Toast Provider	SizeMode	Toast notifications and their 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;
});