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

SASS theme textbox placeholder inconsistencies

1 Answer 15 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 25 Jan 2019, 01:18 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 29 Jan 2019, 11:37 AM
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.
Tags
General Discussions
Asked by
Peter
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or