Materialize CSS - Froms not showing correctly

273 views Asked by At

I was trying to create a login form inside a modal like shown here (https://codepen.io/skcals/pen/bxdpaN). However when I put this same code on my own website here is how it renders :

login form screenshot

Has some one ever met the same issue ? And knows how to solve it ?

This is my html head were materialize css is included :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script type = "text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>

And this is the code of my login form

    <div id="login-modal" class="modal">
      <h5 class="modal-close" style="color:black;">&#10005;</h5>
        <div class="modal-content center">
          <h4>Se connecter</h4>
          <br>

          <form action="#">

            <div class="input-field">
              <i class="material-icons prefix">person</i>
              <input type="text" id="name">
              <label for="name">Username</label>
            </div>
            <br>

            <div class="input-field">
              <i class="material-icons prefix">lock</i>
              <input type="password" id="pass">
              <label for="pass">Password</label>
            </div>
            <br>

            <div class="left" style="margin-left:20px;">
              <input type="checkbox" id="check">
              <label for="check">Remember Me</label>
            </div>
            <br>
            
            <input type="submit" value="Login" class="btn btn-large login-btn">
          </form>
        </div>
      </div>
2

There are 2 answers

0
KB2497 On

I used your code in my project and it worked fine! The only thing I can think off is using the newest version of JQuery:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
0
Emile Clevers On

In the meantime, I've solved my own issue by moving the login div somewhere else. Previously it was inside my navbar menu and I think that is was causing the display issue.

There is just one last thing, the remember me check box doesn't show up ...