Floating label overlaps textbox value

[SUNIL]

I have a sample at https://js.do/sun21170/kendouitextboxsample1, which shows up as in the screenshot below when rendered.

When I run the same sample at https://dojo.telerik.com/QASrBLOT, this problem is not there because no autofill occurs.

So, my question is how to prevent the overlap in my first sample when the autofill is occurring?

[SUNIL]

Using the following CSS prevented overlapping of the label and the textbox value when the textbox is auto-filled.

One could add the ! important declaration to the transform rule to apply it always, but in my case, it was applying without this declaration.

In the following CSS, the has part looks for a parent div element having a class  .k-floating-label-conatiner that has a child textbox element with a pseudo-class of autofill; if such a parent div element is found, then a child label within this parent and having a class  .k-label is translated so it positions above the textbox.

The pseudo-class autofill is there for an element only if the textbox has been auto-filled in the browser.

<style>
  .k-floating-label-container:has(input.k-input:autofill) .k-label {
     transform: translate(-9px, -25px);
  }
</style>

 

The sample with this change is at https://js.do/sun21170/kendouitextboxsample2, and its output is as follows.