New to Telerik UI for Blazor? Download free 30-day trial

Adaptive Rendering

Telerik UI for Blazor supports adaptive rendering for the components that incorporate popup elements. This functionality allows the component to adapt to the screen size by providing different rendering of the popup element based on the screen dimensions.

In this article:

Supported components

The adaptive rendering functionality is supported by the following components:


To enable the adaptive rendering use the AdaptiveMode parameter. It takes a member of the AdaptiveMode enum:

  • None (default)
  • Auto

Optionally, you may set the Title parameter to provide custom header text for the popup on small and medium devices.

Enable the adaptive rendering

// NOTE: The configurations below includes only the DropDownList, but it is applicable to all of the above listed components

// Adapts to the screen size to use the appropriate rendering.
<TelerikDropDownList ... AdaptiveMode="@AdaptiveMode.Auto" Title="Select item"... />

Rendering specifics

When you set the AdaptiveMode to Auto, the component will take the screen size into consideration to use the appropriate rendering. The different rendering targets the popup element of the component and how it will be displayed to the user.

Three breakpoints define the rendering options as follows:

Small Medium Large
Dimensions up to 500px 501px to 768px over 768px
Rendering The popup is rendered as a fullscreen action sheet. The popup is rendered as an action sheet docked to the bottom of the screen. The popup is rendered as an animation container docked to the main element of the component.


  • Custom values - some of the listed components allow custom values (for example, ComboBox, MultiColumnComboBox). This feature is not compatible with AdaptiveMode.Auto.

See also

In this article