Grid PageSizes button width

4 posts, 1 answers
  1. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 30 Dec 2014 Link to this post

    How do I format the width of the page-sizes button on a grid ??

    This is what I have:

    .Pageable(p =>
        p.Refresh(true)
        .ButtonCount(10)
        .PageSizes(new[] { 10, 25, 100, 200, 1000 })
        .Input(true)
        )

    I have tried the following:
    .k-pager-wrap .k-dropdown{
        width: 280px;
    }

    var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
    ddl.list.width(100);

    -which only change the width of the dropdown list.
    How to change the width of the button itself ??
    Thanks.
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 30 Dec 2014 Link to this post

    Hello Jacob,

    The CSS rule should work as expected if you place it after the Kendo UI common CSS file. If the rule needs to be registered before the mentioned file, then increase the specificity of its selector, e.g.:

    .k-pager-wrap .k-pager-sizes .k-dropdown
    {
       width: .........;
    }


    Regards,
    Dimo
    Telerik

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 30 Dec 2014 in reply to Dimo Link to this post

    Thanks Dimo,

    With the right class names, it worked:

    .k-pager-wrap .k-pager-sizes .k-dropdown {
        width: auto;
    }

  4. Bryan
    Bryan avatar
    24 posts
    Member since:
    Nov 2013

    Posted 12 May 2015 in reply to Jacob Link to this post

    Thanks, Jacob! That worked.
Back to Top