Edit and Destroy icon containers are too wide

6 posts, 0 answers
  1. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 11 Nov 2019 Link to this post

    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?

     

  2. Nikolay
    Admin
    Nikolay  avatar
    264 posts

    Posted 13 Nov 2019 Link to this post

    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.
  3. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 13 Nov 2019 in reply to Nikolay Link to this post

    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.

  4. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 13 Nov 2019 in reply to Nikolay Link to this post

    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.

  5. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 13 Nov 2019 in reply to Nikolay Link to this post

    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.
  6. Nikolay
    Admin
    Nikolay  avatar
    264 posts

    Posted 15 Nov 2019 Link to this post

    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.
Back to Top