• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Responsive Design

The Pager supports responsive web-design by adapting its layout based on the set width or the available screen size. To enable the responsive layout, set the responsive property to true.

There are three breaking points which determine the visibility of the internal group of elements:

  • pagerWidth >= 768px - When the Pager width is greater than or equal to 768 pixels, all elements are visible.
  • pagerWidth < 768px & pagerWidth >= 600px - When the Pager width is between 600px and 768px, the Info element is hidden.
  • pagerWidth < 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.

Try to resize the browser width to see the different layouts:

Example
View Source
Change Theme:

In this article

Not finding the help you need?