Bootstrap material floating label not working on autofill

Question

I am using bootstrap material kit on my page, but I have a problem with a label not going up on autofill in chrome. I have searched around and saw that is a known issue, and have tried with using the solution suggested here. But it is still not working for me. Don't know how to fix it?

This is how I call my stylesheets:

<link href="/css/material-kit/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/material-kit/css/material-kit.css" rel="stylesheet"/>
<link href="/css/landing-page.css" rel="stylesheet"/>

Html:

<div class="form-group label-floating">
    <label class="control-label">Password</label>
    <input type="password" name="password" class="form-control" required/>
    @if ($errors->has('password'))
        <span class="help-block">
            <strong>{{ $errors->first('password') }}</strong>
        </span>
    @endif
</div>

And scripts:

<!--   Core JS Files   -->
<script src="/js/landing-page/jquery.min.js" type="text/javascript"></script>
<script src="/js/landing-page/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/landing-page/material.min.js"></script>
<script>
    $(document).ready(function() {
            $.material.options.autofill = true;
            $.material.init();
    });
</script>

The issue you link to suggests that it should have been fixed in `v0.4.1` of the Material Kit. Which version are you using? — Just a student, Feb 09 '17 at 08:07

Marco · Accepted Answer · 2017-02-17T10:47:03.883

4

This is what worked for me in the end:

$(window).load($.debounce(200,function(){
    $('input:-webkit-autofill').each(function(){
        if ($(this).val().length !== "") {
            $(this).siblings('label, i').addClass('active');
        }
    });
}));

edited Feb 17 '17 at 10:47

answered Feb 17 '17 at 10:01

Marco

3,295
9
46
99

Priyanka Thombre · Answer 2 · 2017-02-14T19:03:25.343

I have gone through the link you have mentioned for bootstrap material kit and I have created this sample code by including the same JS and css files which are added on creative-tim's bootstrap material-kit website. I believe your requirement is to pull up the label of password once the input is on focus.

Below is my code that does the same. I hope it helps you.

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Bootstrap Material</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">

  <!-- Bootstrap -->
  <link href="http://demos.creative-tim.com/material-kit/assets/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap Material Design -->
  <link href="http://demos.creative-tim.com/material-kit/assets/css/material-kit.css" rel="stylesheet">


</head>

<body>
  <div class="card">
    <form class="form" method="" action="">
      <div class="content">
        <div class="input-group">
          <span class="input-group-addon">
    <i class="material-icons">face</i>
     </span>
          <input type="text" class="form-control" placeholder="First Name...">
        </div>
        <div class="input-group">
          <span class="input-group-addon">
   <i class="material-icons">email</i>
    </span>
          <input type="text" class="form-control" placeholder="Email...">
        </div>
        <div class="input-group">
          <span class="input-group-addon">
   <i class="material-icons">lock_outline</i>
    </span>
            <div class="form-group label-floating">
  <label class="control-label">Password</label>
  <input type="password" name="password" class="form-control" required value="37648763"/>

</div>
            <div class="form-group label-floating">
  <label class="control-label">Password</label>
  <input type="password" name="password" class="form-control" required/>

</div>
          
        </div>
      </div>
      <div class="footer text-center">
        <a href="#pablo" class="btn btn-simple btn-primary btn-lg">Get Started</a>
      </div>
    </form>
  </div>
  <script src="http://demos.creative-tim.com/material-kit/assets/js/jquery.min.js"></script>
  <script src="http://demos.creative-tim.com/material-kit/assets/js/material.min.js"></script>
  <script src="http://demos.creative-tim.com/material-kit/assets/js/material-kit.js"></script>
</body>

</html>

The problem is not when the input field is on focus, it is when the field is autofilled by chrome — Marco, Feb 14 '17 at 11:20
I get it now when chrome is auto-filling password in the input the password label and the value are overlapping. The functioning of label works when we focus on the input and the class "is-empty" is removed through js which will push the label upwards. Are you facing this issue only in chrome or other browsers too? It would be helpful to debug if you add code in a snippet or fiddle. Thank you. — Priyanka Thombre, Feb 14 '17 at 18:10
I have edited the above code and added the same HTML code for password which you had mentioned and assigned a value to the password and it doesn't seem to overlap. — Priyanka Thombre, Feb 14 '17 at 19:04
It is not the same thing when there is a value and autofill by a browser. When I have a value in the input field it works fine, yes, but I need it to work on autofill, when a browser autofills the password field, then it is not pulling the label above, that is the problem. — Marco, Feb 17 '17 at 09:41

score 0 · Answer 3 · answered Jun 01 '18 at 06:02

If you don't want to auto fill then give autocomplete attribute to the input element. (Note:autocomplete="off" will not work)

<form id="testForm">
    <input type="text"autocomplete="email">
    <input type="password" autocomplete="new-password">
</form>

Bootstrap material floating label not working on autofill

3 Answers3