Kendo grid buttons – cannot override min-width

2 posts, 0 answers
  1. Rich
    Rich avatar
    10 posts
    Member since:
    Jun 2011

    Posted 27 Nov 2013 Link to this post

    I have tried all kinds of selector permutations, but cannot seem to find the CSS selector “specificity” to override the default button min-width of 64px in kendo.common.min.css.  I find that my only option is to modify Kendo’s CSS file itself – which I would prefer not to do.

    The class spec:  .k-grid tbody .k-button,.k-ie8 .k-grid tbody button.k-button{min-width:64px}

    Desired behavior:  min-width:0px

    I am replacing Kendo’s text/icons with custom icons that are 16x16 (any larger and the rows get too tall).  I am using the MVC wrappers (which may be irrelevant to the question).

    Please advise,
  2. Dimo
    Dimo avatar
    8318 posts

    Posted 29 Nov 2013 Link to this post

    Hi Rich,

    Probably you are trying to override the existing min-width style with a CSS rule, which has a wrong selector, or the selector has insufficient specificity to override the existing style. Also make sure that your custom CSS rule is actually registered on the page.

    The existing CSS rules are actually three. I will paste the raw LESS code, so that you can see the logic:

    @grid-button-min-width: 64px;
    .k-grid tbody .k-button,
    .k-ie8 .k-grid tbody button.k-button
        min-width: @grid-button-min-width;
    .k-grid tbody button.k-button
        min-width: @grid-button-min-width + 14; /* for all except IE8 */
    .k-ie7 .k-grid tbody a.k-button
        min-width: @grid-button-min-width - 2; /* for IE7 link buttons */

    The highest specificity above is 32 (or more correctly - 0,0,3,2). In order to override all the rules, you can use a selector with specificity of 33 (0, 0, 3, 3):

    .k-widget.k-grid table > tbody > tr .k-button
        min-width: 0;

    or forget about specificity (generally not recommended) and use brute force:

    .k-grid .k-button
        min-width: 0 !important;

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top