# Adaptiveness

Adaptiveness is an advanced capability that enhances the Kendo UI for Angular Pager and allows it to adjust its rendering and layout based on the screen size.

By default, the Pager adapts its `DropDownList` to allow the modification of the page sizes in all screen resolutions. You can control this behavior by setting the [`adaptiveMode`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagercomponent#adaptivemode) property to one of the values supported by the [`AdaptiveMode`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/adaptivemode) union.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pager/adaptiveness/source.txt)

## Adaptive Breakpoints

In adaptive mode, the Pager component automatically adapts to the current screen size and changes its rendering accordingly:

* On medium-sized screens, the `DropDownList` with suggested page sizes displays as a docked to the bottom action sheet.
* On smaller screens, the `DropDownList` with suggested page sizes 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 Pager 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 `500px` and `768px`.
* Large screens—larger than `768px`.

> If you need to customize the default values of the adaptive breakpoints, refer to the [Adaptive Settings](https://www.telerik.com/kendo-angular-ui-develop/components/utils/adaptive-settings) article.

## Suggested Links

* [API Reference of the Pager](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagercomponent)