Kendo Validation messages causing grid columns to be out of alignment with column headers

2 posts, 0 answers
  1. Sherly
    Sherly avatar
    4 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2013 Link to this post


    We have a grid with a lot of columns - inline editing. Some of these columns have custom validations. For example we have 3 date fields with custom validations attached to them.
    If a validation fails then it will show the message next to the date column. But the problem is when this happens and we scroll to the right the grid columns become unaligned.
    ie. the headers don't stay above the column values when we scroll to the right - perhaps to accomodate the validation messages.

    1) Is there a way to rectify the above situation?
    2) If it is not possible to fix the above, what is the name of the class that needs to be changed to reduce the left and right padding for the validation message - this is more than is needed currently - if we reduce this the grid might look a little better.


  2. Daniel
    Daniel avatar
    2231 posts

    Posted 23 Jul 2013 Link to this post


    The table cell will be expanded to fit the content so there is not a way to avoid this issue without adjusting either the column width or the validation message. To adjust the padding of the tooltip when used in the Grid, you can use a rule similar to the one in the snippet below:

    .k-grid-edit-row .k-tooltip
        padding-left: 0;
        padding-right: 0;
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top