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
isnumeric
, the page number buttons are replaced with a Select element.
The following example demonstrates the different Pager layouts based on its width.