Kendo grid buttons – cannot override min-width

[Brian]

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,

[Dimo]

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.

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

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;
}

Regards,
Dimo
Telerik

[Carlos]

Thanks this helped me.

[Douglas]

This helped me 8 years after it was posted. Thanks.