New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Adaptive Mode

The Telerik UI for ASP.NET Core ColorPicker supports an adaptive mode that renders a mobile-friendly popup. To enable the adaptive rendering mode, set the AdaptiveMode() property to AdaptiveMode.Auto.

The ColorPicker component automatically adapts to the current screen size and changes its rendering accordingly. On medium-sized screens, the suggestion list is displayed as docked to the bottom of the screen, while on smaller screens, it is rendered as a full-screen modal dialog. In all other scenarios, including when the AdaptiveMode() option is not specified or is set to its default value of AdaptiveMode.None, the standard popup is rendered docked to the input of the component. The adaptive mode changes the rendering of the ColorPicker popup element based on the screen resolution of the device (the horizontal value in px) with the following breakpoints:

Small screens—up to 500 px.
Medium screens—between 501 px and 768 px.
Large screens—over 768 px.

The following example demonstrates how to enable the adaptive mode of the ColorPicker by using the AdaptiveMode() option.

Razor
        @(Html.Kendo().ColorPicker()
            .Name("colorpicker")
            .Input(false)
            .Preview(false)
            .Value("#8174F2")
            .AdaptiveMode(AdaptiveMode.Auto)
        )
Razor
        @addTagHelper *, Kendo.Mvc
        
        <kendo-colorpicker name="colorpicker" 
                             input="false" 
                             preview="false"
                             value="#8174F2" 
                             adaptive-mode="AdaptiveMode.Auto">
        </kendo-colorpicker>

Adaptive Mode

See Also