Topic: Label overlapping on autocompletion of email input field
ravinder.sharma@inhabit.com priority asked 11 months ago
![enter code here][1]
Label of input field is overlapping with the autocompleted value.
Please look into this.
If any other information needed , then let me know.
Thanks Ravinder sharma
ravinder.sharma@inhabit.com priority answered 11 months ago
<FieldWrapper>
<InputField
id="username"
name="username"
type="text"
value={formData.username}
label="Email or Username"
onChange={handleInputChange} />
{validator.message('username', formData.username, 'usernameRequired')}
</FieldWrapper>
Mateusz Lazaru staff commented 11 months ago
Thank you, I've got it. Added a task to fix it.
ravinder.sharma@inhabit.com priority commented 11 months ago
Any Estimated time to fix this issue ?
Mateusz Lazaru staff commented 11 months ago
I hope we can make it in December, but I can't promise that.
ravinder.sharma@inhabit.com priority commented 10 months ago
ANy update on above
Mateusz Lazaru staff commented 10 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);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 7.0.0
- Device: Desktop
- Browser: Chrome 119.0.6045.160
- OS: All
- Provided sample code: No
- Provided link: No
ravinder.sharma@inhabit.com priority commented 11 months ago
https://usercontent.mdbootstrap.com/mdb-images/support/8036a018-ad49-4ec3-91ab-3bd16cd99aee-label_overlapping.jpg
Mateusz Lazaru staff commented 11 months ago
Does it occur when the user chooses a value from the browser's suggested options, or when the browser automatically fills inputs on page load?
How to reproduce the problem locally? Could you provide the code snippet?
ravinder.sharma@inhabit.com priority commented 11 months ago
Hey, this is occurring when the browser automatically filling input on page load.