Getting Started
    Native Components
    • Animation
    • Buttons
    • Charts
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Gridupdated
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • Notificationnew
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollViewnew
    • Tooltip
    • TreeViewnew
    • Upload
    Wrapper Components
    Styling & Themes
    Common Features
    Project Setup
New to Kendo UI for Vue? Start a free 30-day trial

Responsive Design

The Pager supports responsive web-design by adapting its layout based on the set width or the available screen size. By default, the responsive layout is enabled. To disable it, set the responsive property to false.

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.
  • 768px < pagerWidth <= 600px - When the Pager width is less than 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.

Move the slider in the below demo to see the different supported layouts:

View Source
Change Theme:

In this article

Not finding the help you need?