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

why is the span position:static

6 Answers 119 Views
Validation
This is a migrated thread and some comments may be shown as answers.
Scott Waye
Top achievements
Rank 1
Veteran
Scott Waye asked on 15 Jan 2017, 12:35 AM

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

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 17 Jan 2017, 02:25 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 17 Jan 2017, 03:07 PM
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?
0
Dimo
Telerik team
answered on 19 Jan 2017, 04:25 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 19 Jan 2017, 08:36 PM

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)
0
Accepted
Dimo
Telerik team
answered on 20 Jan 2017, 01:45 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 1
Veteran
answered on 20 Jan 2017, 02:26 PM

Dimo,

That looks good.  Thanks for the help.

Tags
Validation
Asked by
Scott Waye
Top achievements
Rank 1
Veteran
Answers by
Dimo
Telerik team
Scott Waye
Top achievements
Rank 1
Veteran
Share this question
or