When Telerik validator tooltips show on my grid and the text is longer than a certain length, the text is either cut off by the edge of the cell (IE9), or continues without wrapping (Firefox and Chrome). In both cases, the yellow bubble of the validation tooltip does not contain the entire text. This seems to be related to the grid; if I use the same error message on a control outside the grid the text wraps correctly and the entire text is within the tooltip bubble. Examples are attached. We are using Kendo ASP.Net MVC version 2013.3.1119.440. Has this been fixed in a later version? Does anyone have a workaround for this?
Thanks,
Brian
Thanks,
Brian
2 Answers, 1 is accepted
0
Accepted
Hello Brian,
Validation tooltips have a default maximum width of 300px, but they also should be able to wrap their content. Have you by any chance disabled text wrapping?
You can add this after the Kendo UI stylesheets.
Regards,
Dimo
Telerik
Validation tooltips have a default maximum width of 300px, but they also should be able to wrap their content. Have you by any chance disabled text wrapping?
You can add this after the Kendo UI stylesheets.
html .k-edit-cell .k-tooltip,html .k-grid-edit-row .k-tooltip{ max-width: 500px; /* or */ white-space: normal;}Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
Rank 1
answered on 06 Mar 2014, 02:12 PM
Dimo,
Thank you for your reply. Putting the style you provided with white-space: normal caused the tooltips for the grid cells to wrap.
We are using Bootstrap and the kendo Bootstrap styles on our site. I dug a little deeper after testing your fix and found this in kendo.common-bootstrap.min.css:
According to the IE developer tools, that style is being applied to the validation tooltips in the edit-mode cells.
-Brian
Thank you for your reply. Putting the style you provided with white-space: normal caused the tooltips for the grid cells to wrap.
We are using Bootstrap and the kendo Bootstrap styles on our site. I dug a little deeper after testing your fix and found this in kendo.common-bootstrap.min.css:
.k-grid .k-edit-cell{padding:0 .3em;white-space:nowrap}According to the IE developer tools, that style is being applied to the validation tooltips in the edit-mode cells.
-Brian