This is a migrated thread and some comments may be shown as answers.
Edit and Destroy icon containers are too wide
5 Answers 5 Views
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 11 Nov 2019, 12:47 PM

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?

 

5 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 13 Nov 2019, 12:14 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Randy
Top achievements
Rank 1
answered on 13 Nov 2019, 12:28 PM

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.

0
Randy
Top achievements
Rank 1
answered on 13 Nov 2019, 12:32 PM

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.

0
Randy
Top achievements
Rank 1
answered on 13 Nov 2019, 01:04 PM
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.
0
Nikolay
Telerik team
answered on 15 Nov 2019, 11:31 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Randy
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Randy
Top achievements
Rank 1
Share this question
or