CODEWITHSUNDEEP
htmlcssgoogle-chromeautofillbootstrap-material-design
Ludwig
Ludwig

Reputation: 1811

Bootstrap material floating label not working on autofill

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>

Upvotes: 7

Views: 9057

Answers (3)

Vishnu
Vishnu

Reputation: 11

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>

Upvotes: 0

Ludwig
Ludwig

Reputation: 1811

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');
        }
    });
}));

Upvotes: 4

Priyanka Thombre
Priyanka Thombre

Reputation: 232

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>

Upvotes: 0

Related Questions