Nicolas_LeBot Nicolas_LeBot - 3 months ago 55
HTML Question

Chrome autofill with MDL for type="password"

I'm currently working on my website with the MDL (Material Design Lite) from google and I have a little problem.

enter image description here

As you can see, the stars are in the good place but the password stay here (he is moving after any click or press on the keyboard)

My code is really simple :

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" name="mail">
<label class="mdl-textfield__label">Adresse Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="test" class="mdl-textfield__input" type="password" name="password">
<label class="mdl-textfield__label">Password</label>
</div>


The code is usual and basic. Problem is, in MDL (Link here : https://www.getmdl.io/components/index.html#textfields-section) there is nothing for password type, so I always got the problem from before.

I want to keep the chrome autofill for my client so disabled it is not a option. Is there any way to change this problem ?

Thank's !

Answer

HTML

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="password" id="password" required name="password">
  <label class="mdl-textfield__label" for="password"></label>
</div>

CSS Fix

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label {
  transform: translate3d(0, -20px, 0);
  visibility: hidden;
}

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label:after {
  content: 'Password';
  visibility: visible;
  left: 0;
  transform: translate3d(0, -20px, 0);
  background: transparent;
  color: inherit;
}

Change the color and maybe the px offset to suit your needs


JavaScript (JQuery) solution

  $.each($('.mdl-textfield__input'), function() {
    $(this).parent().get(0).MaterialTextfield.checkDirty(); // Pre-filled values from browser check
  });
Comments