Page Size Selector styling.

3 posts, 0 answers
  1. Scott
    Scott avatar
    22 posts
    Member since:
    Mar 2011

    Posted 04 Mar 2016 Link to this post

    I'm trying to style the page size selector shown in the paging control of a grid. I've completed almost everything but I can't figure out how to style the page size items in list selector when the list is activated (opened for selection).  Please see the attached image.

    For what it's worth, here are the styles I've applied to the selector so far:

    /*Page number list*/
            .k-pager-numbers .k-link,
            .k-pager-numbers .k-link:hover,
            .k-pager-numbers .k-state-selected {
                border-radius: 0; /*Use squares instead of circles*/
                color: #bbbbbb;
                background-color: #2b2b2b;
                border: 1px solid #4f4f4f;
                /*font-size: 12px;*/
            }
     
            /*Selected page number*/
            .k-pager-numbers .k-state-selected {
                background: #3a3a3a;
                border-color: #4f4f4f;
            }
     
            /*Pager links*/
            .k-pager-wrap > .k-link {
                border-radius: 0; /*Use squares instead of circles*/
                color: #bbbbbb;
                border: 1px solid #4f4f4f;
            }
     
            .k-pager-wrap > .k-link:hover {
                border-color: #4f4f4f;
            }
     
            /*Pagesize dropdown*/
            .k-widget .k-dropdown {
                background: #2b2b2b;
                border: 1px solid #4f4f4f;
            }
     
            .k-dropdown-wrap .k-select {
                background: #2b2b2b;
            }
     
            .k-dropdown-wrap .k-input {
                background: #2b2b2b;
            }

     

    Thanks for any help that you can provide.

    Scott

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 08 Mar 2016 Link to this post

    Hi Scott,

    For this scenario I would suggest the following:
    - Set some class name to the pageSize's popup (for example customClass);
    - Use this class in the following CSS selector: 
    .customClass .k-list .k-item {
        color: red;
        background: yellow;
    }
    For your convenience below is a dojo which demonstrates the suggested approach in action: 
    http://dojo.telerik.com/@Iliana/IYUNE

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Scott
    Scott avatar
    22 posts
    Member since:
    Mar 2011

    Posted 08 Mar 2016 in reply to Iliana Nikolova Link to this post

    Very cool!  Thanks for the helpful solution.
Back to Top