Topic: Labels not aligning correct when using autofill in chrome
When I'm entering text in an input field the floating labels are acting weird when using autofill in chrome compared to typing in manually. I already removed the blue input background with this fix: https://mdbootstrap.com/docs/jquery/forms/inputs/#background-fix but the labels are not aligning correct. Snippet is in the bottom.
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
<div class="md-form">
<mdb-icon fas icon="envelope" class="prefix form-icon"></mdb-icon>
<input type="email" id="materialLoginFormEmail" class="form-control" formControlName="email" mdbInput>
<label for="materialLoginFormEmail">E-mail</label>
</div>
Hi!
Thank you for reporting the problem. As a workaround try to add to your styles.scss:
.md-form > input[type]:-webkit-autofill:not(.browser-default):not([type='search']) + label {
transform: translateY(-14px);
}
Hope it helps!
Best Regards, Bartosz.
Hi again, thanks that worked!
The outline version does almost the same, it just shrinks the text so it gets very small:
Expected:
Actual:
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.4.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
1001albertpadilla commented 5 years ago
I'm having the same problem with Chrome's auto populate -- selecting a previously entered value in mdbInput.