This is a migrated thread and some comments may be shown as answers.

min-width setting for command buttons in Grid.

1 Answer 152 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Genadij
Top achievements
Rank 1
Genadij asked on 10 Apr 2017, 09:42 AM

Hi,

I have changed the style for command buttons in Grid using CSS:

.abutton,
div.k-grid .k-grid-edit,
div.k-grid .k-grid-delete,
div.k-grid .k-grid-cancel,
div.k-grid .k-grid-update {
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 0px 0px 0px;
    text-align: center;
    text-indent: -444px;
    border: 0;
}

div.k-grid .k-grid-edit {
    background: url('/Content/Icons/edit.png');
}

div.k-grid .k-grid-delete {
    background: url('/Content/Icons/cancel.png');
}

div.k-grid .k-grid-cancel {
    background: url('/Content/Icons/cancel.png');
}

div.k-grid .k-grid-update {
    background: url('/Content/Icons/ok.png');
}

After that all command buttons still have the width equal 64px coming from kendo-common-bootstrap.css  or kendo-common.css:

.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {

    min-width: 64px;

}

Unfortunately I cannot find the way to UNSET or set min-width to 16px as I need.

Could you please help.

Kind regards

Genadij

 

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 12 Apr 2017, 10:31 AM
Hello Genadij,

I was not able to replicate the problem on my side by using the provided CSS code.

Based on your post, I assume that you are using Internet Explorer 8. That said, it might be the cause for this behavior as IE 8 is no longer supported by Kendo UI. More information about the supported web browsers is available here:

http://docs.telerik.com/kendo-ui/intro/supporting/browser-support

Further, I would like to continue my investigation and it will help me a lot if you prepare and share an isolated sample Dojo that clearly reproduces the issue.

Finally, you might be interested in Kendo UI Web Font Icons. 

http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web

You could use these icons to easily change the default ones.

I look forward to hearing from you. 

Regards,
Preslav
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Genadij
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or