why is the span position:static

[Scott Waye]

I have a problem with the tooltip validation appearing in front of some elements and behind others (e.g. input kendo-numeric-text-box).  When I look at the CSS for the span that holds the tooltip it has a z-index of 9999 which looks good, but then it has position:static .  From what I've read around the internet  e.g. https://css-tricks.com/almanac/properties/p/position/

z-index only works when the position is not static.  Indeed if I add

span .k-tooltip-validation {
    position: relative;
}

 

then it appears in front of the numeric text box.  Why is relative not the default setting for the tooltip?

 

Thanks

[Dimo]

Hello Scott,

The Kendo UI validation tooltips can be rendered as <div>s or <span>s. <div>s are used for popup-like validation messages, for example inside the Grid:

http://demos.telerik.com/kendo-ui/grid/editing

In such cases, the position style is absolute.

On the other hand, <span>s are used for static inline validation messages, for example:

http://demos.telerik.com/kendo-ui/validator/index

(custom styling is used for the looks of the messages, but the positioning depends on the built-in Kendo UI CSS styles)

In other words, different positioning can be used, depending on the exact scenario and markup. The following help section provides additional tips for customizing the validation messages' position:

http://docs.telerik.com/kendo-ui/controls/editors/validator/overview#customization-of-tooltip-position

Let me know if you need more information.

Regards,
Dimo
Telerik by Progress

[Scott Waye]

Thanks for the links.  I think you are suggesting that I should use divs for popup toolip validation messages.  Do you have an example of that for fields not in a grid?

[Dimo]

Hi Scott,

Yes, use <div>s or apply custom styles to the <span>s. Here is an example with a <div> that relies on the configured errorTemplate to replace the placeholder element:

http://docs.telerik.com/kendo-ui/api/javascript/ui/validator#configuration-errorTemplate

<form id="myform">
  <div class="k-invalid-msg" data-for="name"></div>
  Some content before the textbox <input type="text" id="name" name="name" required />

  <button>Click me</button>
</form>

<script>
  $("#name").kendoAutoComplete({
    dataSource: [],
    separator: ", "
  });

  $("#myform").kendoValidator({
    errorTemplate: "<div class='k-widget k-tooltip k-tooltip-validation k-invalid-msg'>Absolutely positioned message: #=message#</div>"
  });
</script>

Simply adding a placeholder <div> (with no custom error template) will result in the <div> being replaced by a <span>, because this is the element used by the default error template.

Regards,
Dimo
Telerik by Progress

[Scott Waye]

Thanks, your example works well, but when I move it to Angular I am having a problem.

See http://dojo.telerik.com/IyoVU

Type something invalid in the date picker, eg. "a".  Now use the mouse to click in the next field, labelled "Cargo Rate".  The tooltip appears and then disappears very quickly.  I have a dojo without Angular and that worked fine (http://dojo.telerik.com/OXEqI)

[Dimo]

Hello Scott,

The Angular demo needs some tweaking to be configured correctly.

1. The error template should be defined in an options object, not in markup

2. Use the following approach to define custom error messages

http://docs.telerik.com/kendo-ui/controls/editors/validator/overview#definition-of-custom-error-messages

Here is an updated example.

http://dojo.telerik.com/IyoVU/2

Regards,
Dimo
Telerik by Progress

[Scott Waye]

Dimo,

That looks good.  Thanks for the help.