New to Kendo UI for Angular? Start a free 30-day trial

Responsive Design

The Pager supports a responsive web-design by adapting its layout based on the set width or the available screen size.

Using the Pager template disables its default responsive behavior.

Visible Pager Elements

Based on its width, the Pager component determines which internal elements will be rendered. When the Pager width is greater than or equal to 768 pixels, it will display all elements as follows:

Breaking Points

When the Pager width is less than 768 pixels, some of its elements are hidden as follows:

  • When the width is less than 768 pixels, its info element will be hidden.
  • When the width is less than 600 pixels, its page-size drop-down list will also be hidden. If the Pager type is numeric, the page-number buttons will be replaced by a select element.

The following example demonstrates the different Pager layouts based on its width.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?