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:

• The Previous and Next buttons.
• The numeric page number buttons, or, if the Pager type is set to 'input', a numeric input.
• The drop-down list with the page sizes.
• The info element.

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.

Suggested Links

• API Reference of the Pager