SASS theme textbox placeholder inconsistencies

2 posts, 0 answers
  1. Peter
    Peter avatar
    1 posts
    Member since:
    Oct 2017

    Posted 25 Jan Link to this post

    I am playing around with default-v2 SASS for jquery and I noticed that placeholder or textbox focus/blur behave differently between standard input and input with icon.

    <input class="k-textbox" placeholder="enter criteria" />

    First example looks more "correct". Placeholder color is lighter. Box also gets a shadow on focus.

    <span class="k-textbox k-space-right">
      <input placeholder="enter criteria" />
      <span class="k-icon k-i-search"></span>
    </span>

    Second example differes in a way it is flat. Placeholder is same color as text (confusing for user), box doesn't get any shadow on focus.

    Is this a limitation or just a style misconfiguration? How can we make this to be consistent?

    quick demo:

    https://dojo.telerik.com/UmuwUYeJ

     

  2. Dimitar
    Admin
    Dimitar avatar
    645 posts

    Posted 29 Jan Link to this post

    Hi Peter,

    In general, the demonstrated approach for adding an icon to the textbox in the Demo is intended to be used with the Less-based Themes and will not work for the Sass-based Themes. However, you could resolve both the issues as follows:

    The placeholder color issue could be resolved by adding the k-input class to the nested <input /> element:
    <input type="text" class="k-input" placeholder="placeholder..."/>

    The box-shadow issue is more tricky, as when the nested <input> element is focused, its parent box-shadow should be set. This can be achieved in two ways:

    1) With JavaScript(Dojo example):
    <script>
      $(document).ready(function() {
        $(".k-textbox input").focus(function() {
        $(this).parent().css("box-shadow", "0 2px 2px 1px rgba(0,0,0,.06)");
      });
           
      $(".k-textbox input").focusout(function() {
        $(this).parent().css("box-shadow", "none");
      });
    });
    </script>

    2) With CSS(Dojo example):
    <style>
      .k-textbox:focus-within {
        box-shadow: 0 2px 2px 1px rgba(0,0,0,.06);
      }
    </style>

    The above used focus-within select has limited browser support, thus take this into consideration in case you would like to use the CSS approach.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top