Size Modes

Dec 12, 2025
4 minutes to read

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

Blazor components - Size modes

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.
Dialog Provider	SizeMode	Message boxes and their content.
Drawer	SizeMode	The control and its content.
DropDown	SizeMode	The control and its content.
DropDownBox	SizeMode	The control and its content.
DropDownButton	SizeMode	The entire control.
Filter Builder	SizeMode	The control and its content.
Flyout	SizeMode	The control and its content.
Form Layout	SizeMode	The control and its inner components.
Grid	SizeMode	The control and its inner components.
HTML Editor	GlobalOptions.SizeMode	Toolbar and dialogs.
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	SizeMode	The control and its content.
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.

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; }
}

ComboBox - Size modes

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 DevExpress Template Kit:

Blazor Template Kit - Size Mode Menu

The kit adds the SizeMode global option to the Program.cs file.

Program.cs

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

Switch Size Modes at Runtime

The following example implements a size mode combobox designed to switch between small, medium, and large size modes at runtime. Key steps include:

Implement a service that manages application size mode (SizeManager.cs).
Implement a service that manages cookies (CookiesService.cs).
Create a function that assigns selected size mode to the --global-size CSS variable (size-manager.js).
Add a razor file that contains a size mode menu and injects the SizeManager service (SizeChanger.razor).
Reference the size manager script in the <head> section of the App.razor file.
Use the --global-size CSS variable to define font size application-wide.

Blazor - Size Mode Switcher

@rendermode InteractiveServer
@inject SizeManager SizeManager

<DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                  RenderStyleMode="ButtonRenderStyleMode.Text"
                  Text="@FormatSizeText(SizeManager.ActiveSizeMode)"
                  ItemClick="OnSizeChange">
    <Items>
        @foreach (var sizeMode in sizeModes) {
            <DxDropDownButtonItem Text="@FormatSizeText(sizeMode)" Id="@sizeMode.ToString()"  />
        }                
    </Items>
</DxDropDownButton>

@code {
    List<SizeMode> sizeModes = Enum.GetValues<SizeMode>().ToList();
    string FormatSizeText(SizeMode size) => size + " size";

    protected async Task OnSizeChange(DropDownButtonItemClickEventArgs args) {
        await SizeManager.SetSizeMode(Enum.Parse<SizeMode>(args.ItemInfo.Id));
    }

    protected override async void OnAfterRender(bool firstRender) {
        if (firstRender)
            await SizeManager.SetSizeInJS();
    }
}

using DevExpress.Blazor;
using Microsoft.AspNetCore.DataProtection.KeyManagement;
using Microsoft.JSInterop;

namespace switcher.Services {
    public class SizeManager {
        protected CookiesService _cookiesService;
        protected IJSRuntime _jsRuntime { get; set; }
        const string SizeModeCookieKey = "DXSizeMode";

        public SizeMode ActiveSizeMode;

        public SizeManager(CookiesService cs, IHttpContextAccessor httpContextAccessor, IJSRuntime js) {
            _cookiesService = cs;
            _jsRuntime = js;
            var sizeMode = _cookiesService.GetCookie(httpContextAccessor, SizeModeCookieKey);
            if (string.IsNullOrEmpty(sizeMode))
                ActiveSizeMode = SizeMode.Medium;
            else
                ActiveSizeMode = Enum.Parse<SizeMode>(sizeMode);
        }

        public async Task SetSizeMode(SizeMode sizeMode) {
            ActiveSizeMode = sizeMode;
            await _cookiesService.SetCookie(SizeModeCookieKey, sizeMode.ToString());
            await SetSizeInJS();
        }
        public async Task SetSizeInJS() {
            await _jsRuntime.InvokeVoidAsync("setSize", GetFontSizeString());
        }

        public string GetFontSizeString() {
            return ActiveSizeMode switch {
                SizeMode.Small => "14px",
                SizeMode.Medium => "16px",
                SizeMode.Large => "18px",
                _ => "16px"
            };
        }
    }
}

using Microsoft.JSInterop;

namespace switcher.Services {
    public class CookiesService {
        protected IJSRuntime JSRuntime { get; set; }
        public CookiesService(IJSRuntime js) {
            JSRuntime = js;
        }
        public string GetCookie(IHttpContextAccessor httpContextAccessor, string key) {
            return httpContextAccessor.HttpContext?.Request.Cookies[key];
        }
        public async Task SetCookie(string key, string value) { 
            await JSRuntime.InvokeVoidAsync("setCookie", key, value);
        }
    }
}

builder.Services.AddDevExpressBlazor();
builder.Services.AddMvc();
builder.Services.AddHttpContextAccessor();
builder.Services.AddScoped<ThemesService>();
// ...
builder.Services.AddTransient<CookiesService>();

window.setSize = function (value) {
    document.documentElement.style.setProperty('--global-size', value);
};

<head>
@* ... *@
    <script src=@AppendVersion("switcher-resources/js/size-manager.js")></script>
    @* ... *@
</head>

:root {
    --global-size: 16px;
}

<div class="switcher-panel">
    <SizeChanger />
    @* ... *@
</div>

View Example: Switch Themes and Size Modes within Blazor Apps at Runtime

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Global Size Mode Property

Switch Size Modes at Runtime