Resize Grid command buttons

[Barry]

Hi,

I have the edit and delete buttons

 

 

columns.Command(commands =>

 

{

 

commands.Edit().ButtonType(

 

 

 

GridButtonType

.ImageAndText);

 

 

commands.Delete().ButtonType(

 

 

 

GridButtonType

.ImageAndText);

 

 

How can I resize the default button size? Please see attachment for more details

[Dimo]

Hello Barry,

Currently the width of the Grid edit buttons is controlled by the following CSS code:

.t-grid tbody .t-button
{
    min-width: 64px; /*main setting*/
}

.t-grid tbody button.t-button, #ie8#skips
{
    min-width: 78px; /*+14 for buttons, except IE8*/
}

*+html .t-grid tbody a.t-button
{
    min-width: 62px; /*-2 for links for IE7*/
}

There complexity of the code is due to cross-browser issues, which require use to use several CSS declarations in order to achieve the same size in different browsers.

What you can do is use the same logic and code, but different numbers. Also, it is better to use higher specificity, e.g.:

div.t-grid tbody .t-button
{
    min-width: 164px; /*main setting*/
}

div.t-grid tbody button.t-button, #ie8#skips
{
    min-width: 178px; /*+14 for buttons, except IE8*/
}

*+html div.t-grid tbody a.t-button
{
    min-width: 162px; /*-2 for links for IE7*/
}

Of course, you can set min-width to zero and use width styles, especially if you want to make the buttons smaller.


Greetings,
Dimo
the Telerik team

[Barry]

Thanks Dimo! The css worked like a charm :)