Label overlapping on autocompletion of email input field

Mateusz Lazaru staff commented a year ago

Thank you, I've got it. Added a task to fix it.

ravinder.sharma@inhabit.com pro premium priority commented a year ago

Any Estimated time to fix this issue ?

Mateusz Lazaru staff commented a year ago

I hope we can make it in December, but I can't promise that.

ravinder.sharma@inhabit.com pro premium priority commented 11 months ago

ANy update on above

Mateusz Lazaru staff commented 11 months ago

Yes. It's related to default chrome behavior. When the browser adds autocomplete value, it does not trigger any event like onChange, onInput etc.

That's why, it's hard to detect autocomplete. We have one solution in testing phase, and it's very possible it will be released in a few weeks.

Until that, I've prepared a CSS workaround for you:

:-webkit-autofill ~ .form-label,
:autofill ~ .form-label {
  transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
}

:-webkit-autofill ~ .form-notch .form-notch-middle,
:autofill ~ .form-notch .form-notch-middle {
  border-right: none;
  border-left: none;
  border-top: 1px solid transparent !important;
}

/* Only needed if you use large input */
.form-control-lg:-webkit-autofill ~ .form-label,
.form-control-lg:autofill ~ .form-label {
  transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
}

/* Only needed if you use small input */
.form-control-sm:-webkit-autofill ~ .form-label,
.form-control-sm:autofill ~ .form-label {
  transform: translateY(-0.85rem) translateY(0.1rem) scale(0.8);
}