why is the span position:static

7 posts, 1 answers
  1. Scott Waye
    Scott Waye avatar
    153 posts
    Member since:
    Nov 2009

    Posted 14 Jan Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8404 posts

    Posted 17 Jan Link to this post

    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.
  3. Scott Waye
    Scott Waye avatar
    153 posts
    Member since:
    Nov 2009

    Posted 17 Jan in reply to Dimo Link to this post

    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?
  4. Dimo
    Admin
    Dimo avatar
    8404 posts

    Posted 19 Jan Link to this post

    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.
  5. Scott Waye
    Scott Waye avatar
    153 posts
    Member since:
    Nov 2009

    Posted 19 Jan in reply to Dimo Link to this post

    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)
  6. Answer
    Dimo
    Admin
    Dimo avatar
    8404 posts

    Posted 20 Jan Link to this post

    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.
  7. Scott Waye
    Scott Waye avatar
    153 posts
    Member since:
    Nov 2009

    Posted 20 Jan in reply to Dimo Link to this post

    Dimo,

    That looks good.  Thanks for the help.

Back to Top