This is a migrated thread and some comments may be shown as answers.

Kendo validator ToolTip not aligning with correct column

2 Answers 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 16 Dec 2013, 05:07 PM
I am using the Kendo k-tooltip-validation and k-invalid-msg to display validation errors in the Kendo grid.  I have two questions.

1)  Is there a way to make the tooltip's width to automatically expand when the message text is longer?  The tooltip seems to have a static width.

2)  There is a small "nub" on the top (center) of the tooltip.  From the user's perspective, it appears the message is aligned to the wrong column (see attached PNG).  It appears the tooltip starts in the correct spot, but the "nub" points to the next column over.  Is there a way to align the small arrow to the left, OR remove it entirely?

The code appears to be pointing to the correct column:
         ModelState.AddModelError("RateUOM", "UOM must be 'LB' or 'CS'");

Thanks,
R

2 Answers, 1 is accepted

Sort by
0
Brian
Top achievements
Rank 1
answered on 17 Dec 2013, 08:32 PM
I believe I have figured out how to resolve this.  I found which style was responsible for the "nub" (k-callout-n).  I was able to override the CSS style with inline CSS (higher specificity) in the validation template:
         <div class="k-callout k-callout-n" style="left:10%"></div>

This moved the pointer nearer to the actual column getting the error.
0
Alexander Popov
Telerik team
answered on 18 Dec 2013, 04:37 PM
Hi Rich,

Basically the validation error tooltips appear under the cell and are aligned with it to the left. As a result if the tooltip is wider than the cell it might appears as if it's related to the next cell. Increasing the UOM's width a little should help with that. Regarding your second question - the tooltip's width is not static, however there is a max-width of 300px that could be overridden with the following CSS rule:  
.k-tooltip {
    max-width: 500px !important;
}


Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Brian
Top achievements
Rank 1
Answers by
Brian
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or