Responsive Design

The Kendo UI for Angular Pager is designed to provide a seamless user experience across various screen sizes and devices. By leveraging its built-in responsive design capabilities, the Pager ensures that its layout dynamically adjusts to accommodate different widths, making it a great choice for modern web applications.

By default, the Pager adapts its elements to maintain usability and clarity in desktop, laptop, table, and mobile environments. To control this behavior, use the built-in responsive property and adjusts its value to either true or false.

When the Pager is in non-responsive mode, its internal controls automatically wrap onto a new row to ensure all elements remain accessible and visible.

Change Theme

Theme

Loading ...

Based on its width, the Pager dynamically determines which internal elements to render. When the available space is limited, the Pager hides its controls in the following order to maintain usability:

1. The Pager replaces the numeric page buttons with the numeric input mode.
2. The info element, which provides details about the current page and total items, is hidden.
3. The Page label within the numeric input is concealed to save space.
4. The items per page label is removed to streamline the layout.
5. The DropDownList for selecting page sizes is hidden to prioritize essential elements.

Using the Pager template to customize the content of the component disables the built-in responsive behavior.

Suggested Links

• API Reference of the Pager