Labels not aligning correct when using autofill in chrome


Topic: Labels not aligning correct when using autofill in chrome

xthedeus asked 5 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: https://mdbootstrap.com/docs/jquery/forms/inputs/#background-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>
</div>

1001albertpadilla commented 5 years ago

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


Bartosz Termena staff answered 5 years ago

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.


xthedeus answered 5 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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