Adaptiveness
Adaptiveness is an advanced capability that enhances the Kendo UI for Angular ColorPicker and allows it to adjust its rendering and layout based on the screen size.
Adaptive Mode
The ColorPicker supports an adaptive mode that provides a mobile-friendly rendering of its popup by changing it to an action sheet. To enable it, set the adaptiveMode input property to auto.
In adaptive mode, the ColorPicker component automatically adapts to the current screen size and changes its rendering accordingly:
- On medium-sized screens, the list with suggestions displays as a docked to the bottom action sheet.
- On smaller screens, the list with suggestions appears in a full-screen action sheet.
- In all other scenarios, including when the parameter is not set or is set to its default value of
'none', standard popup rendering is used.
The adaptive mode changes the rendering of the popup element of the ColorPicker based on the screen resolution of the device (the horizontal value in px) with the following breakpoints:
- Small screens—up to
500px. - Medium screens—between
500pxand768px. - Large screens—larger than
768px.
If you need to customize the default values of the adaptive breakpoints, refer to the Adaptive Settings article.
The following example demonstrates the adaptive mode of the Kendo UI for Angular ColorPicker.