Positioning of pager controls

2 posts, 0 answers
  1. markT
    markT avatar
    6 posts
    Member since:
    Mar 2007

    Posted 17 Sep 2020 Link to this post

    I'm struggling with layout of the pager controls. I'm trying to get the .k-pager-refresh and .k-pager-info elements to flush left (right next to the pager buttons) instead of flush right. Does anyone have a solution for this?
  2.
  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 21 Sep 2020 Link to this post

    Hello Mark,

    You can customize the pager controls layout through CSS, for example:

    <style>
  .k-grid-pager .k-pager-info {
    justify-content: flex-start;
    max-width: 120px;
  }
  
  .k-grid-pager .k-pager-refresh {
    margin-left: 0px;
  }
</style>

    Here's a dojo example with the CSS rules above applied: https://dojo.telerik.com/IsihIgUW/2

    Regards,
    Ivan Danchev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top