Mdb-ui-kit: Input floating label not floating on login form auto completion

[Yohanda]

Hello i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks, i really love this project! :smile:

[rosskevin]

https://github.com/FezVrasta/bootstrap-material-design/blob/master/CONTRIBUTING.md#tldr-create-a-test-case-using-this-codepen-template-when-submitting-an-issue

[rosskevin]

Also, which browser and which login manager?

[FezVrasta]

Seems like the default chrome keychain

[FezVrasta]

There are several solutions
http://stackoverflow.com/questions/11708092/detecting-browser-autofill

I wonder why mine is not working here

[Yohanda]

Yeah that's right from Chrome Browser

[YamiOdymel]

Try to disabled the auto-fill function by adding this attribute to the password input:

autocomplete="new-password"

[cannobbio]

Until there's an actual "fix" I'm doing this in my login forms:

JS:

// Browser password autofill floating label fix
$(window).load(function() {
  setTimeout(function(){
    var $pwdInput = $('input[type="password"]:-webkit-autofill');
    $pwdInput.closest('.form-group').removeClass('is-empty');
  }, 500);
});

This is just a half a sec timeout that removes the .is-empty class after the page has loaded.

CSS:

input[type="password"]:-webkit-autofill {
  position: relative;
}

This hides the label behind the "yellow" input until it animates.

[FreekingDean]

Is there a reason this is closed? I am having the same issue, would like to know if this is my own implementation issues or if it is an issue in bootstrap-material-design

[Yohanda]

no its not ur implementation issues, this bootstrap-material-design issue

On Thu, Jul 14, 2016 at 7:35 AM, Dean Galvin [email protected]
wrote:

Is there a reason this is closed? I am having the same issue, would like
to know if this is my own implementation issues or if it is an issue in
bootstrap-material-design

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/FezVrasta/bootstrap-material-design/issues/976#issuecomment-232525813,
or mute the thread
https://github.com/notifications/unsubscribe/AK3BIMy-xM6cFzBLKhDlxypycpCbX-Omks5qVYRrgaJpZM4II7-b
.

Regards,
Yohanda
Software Engineer

Wisma 77
Jln. S. Parman Kav. 77
Jakarta Barat 11410
HP * : *[phone]
Email : [email protected] andri.[email protected]
Website : www.tokopedia.com

[ShankzPatil]

working... is parent div "md-input-container"

$(document).ready(function () {
 setTimeout(function () {
var $pwdInput = $('input[type="password"]:-webkit-autofill');
$pwdInput.closest("md-input-container").addClass('md-input-has-value');
}, 500);
});

[pmayur25]

I used Material design Bootstrap (MDB)
below code is working for me

$(document).ready(function () {
setTimeout(function () {
var $Input = $('input:-webkit-autofill');
$Input.next("label").addClass('active');
}, 200);
});