Edit and Destroy icon containers are too wide

[Randy]

In my Kendo MVC grid, I have code as follows to place Edit and Destroy icons in a table cell:

columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(86);

 

I've attached a file that shows the result of this. As you can see, the container for the icons are much larger than they need to be and I have to devote almost 90 pixels to the column just to prevent the icons from wrapping. Is there a way I can make the icon containers smaller?

 

[Nikolay]

Hi Randy,

To change the described buttons behavior I would suggest first horizontally centering the icons within the button container and then adjusting the buttons widths as per the project needs. This could be done via the following styles:

.k-button.k-button-icontext .k-icon {
   margin: auto; /*horizontally center the button icon */
  } 
.k-grid-edit, .k-grid-delete {
   width: 30px /*adjust the Edit and Delete buttons widths */
  }  

Below is the result that can be observed:

Please try this approach and let me know if you have further questions.

Regards,
Nikolay
Progress Telerik

[Randy]

Thank you Nikolay. I tried what you suggested by adding the following to my page. Note I attempted to set the width of the buttons to 20px. 

<style>
    .k-button.k-button-icontext .k-icon {
        margin: auto; /*horizontally center the button icon */
    }

    .k-grid-edit, .k-grid-delete {
        width: 20px; /*adjust the Edit and Delete buttons widths */
    }
</style>

However, I get the exact same results. The buttons didn't shrink at all.

[Randy]

Thank you Nikolay. I tried what you suggested by adding the following to my page. Note I attempted to set the width of the buttons to 20px. 

<style>
    .k-button.k-button-icontext .k-icon {
        margin: auto; /*horizontally center the button icon */
    }

    .k-grid-edit, .k-grid-delete {
        width: 20px; /*adjust the Edit and Delete buttons widths */
    }
</style>

However, I get the exact same results. The buttons didn't shrink at all.

[Randy]

Nikolay - It seems that I need to include a min-width setting to k-grid-edit and k-grid-delete. Once I added that, it worked as expected. Without it, the buttons do not shrink.

[Nikolay]

Hi Randy,

I am glad to hear you managed to resolve the situation.

The Grid itself and the buttons do not set min-width automatically. I just tested and from my end specifying only width: 20px of the k-grid-edit and k-grid-delete apllies the style and shrinks the buttons. You could check if there is a style setting this. However, if you reached the decired result you may leave it as it is now.

If there is anythign lease, I could help with, pelase contact me back.

Regards,
Nikolay
Progress Telerik