Topic: Labels not aligning correct when using autofill in chrome

xthedeus free asked 4 years ago

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: but the labels are not aligning correct. Snippet is in the bottom.

Expected behavior enter image description here

Actual behavior enter image description here

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>

1001albertpadilla free commented 4 years ago

I'm having the same problem with Chrome's auto populate -- selecting a previously entered value in mdbInput.

Bartosz Termena staff answered 4 years ago


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.

xthedeus free answered 4 years ago

Hi again, thanks that worked!

The outline version does almost the same, it just shrinks the text so it gets very small:

Expected: enter image description here

Actual: enter image description here

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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