Page Size Selector styling.

[Scott]

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

[Iliana Dyankova]

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

 

 

[Scott]

Very cool!  Thanks for the helpful solution.