Responsive Design

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

When the Pager template is used, the default responsive behavior is disabled, as the developer has full control over the Pager content.

Visible Pager elements

The Pager component determines which internal elements to render based on its width. When the Pager width is greater than or equal to 768 pixels, all elements are visible:

• Previous and next buttons
• Numeric page number buttons, or a numeric input if the Pager type is set to 'input'.
• PazeSizes DropDownList
• Info element

Breaking Points

• 768px - When the Pager width is less than 768px, the Info element is hidden.
• 600px - When the Pager width is less than 600px, the PageSizes element is also hidden. If the Pager type is numeric, the page number buttons are replaced with a Select element.

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

Suggested Links

• API Reference of the Pager