materializeCSS: animiertes Etikett funktioniert nicht

Ich versuche, mich mit der Materialisierung vertraut zu machen, und arbeite gerade an einer Login-Box. Das Problem besteht darin, dass die Platzhalterbezeichnung in jedem Eingabefeld sich nach oben bewegt, wenn ich auf das Eingabefeld klicke. Dies geschieht jedoch nicht, und wenn ich etwas Text eintippe, ist der Etikettentext immer noch da.materializeCSS: animiertes Etikett funktioniert nicht

This is how it looks like when I type something in the input box.

Hier ist meine HTML-Datei:

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <title>@ViewData["Title"]</title> 

     <link rel="stylesheet" href="~/css/materialize.css" /> 
     <link rel="stylesheet" href="~/css/site.css" /> 
     <!--Import Google Icon Font--> 
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <!--Import materialize.css--> 
     <link type="text/css" rel="stylesheet" href="~/css/materialize.min.css" media="screen,projection" /> 
     <link href="css/layouts/page-center.css" type="text/css" rel="stylesheet" media="screen,projection"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    </head> 
    <body> 
     <header> 
     </header> 
     <div class="section"></div> 
     <main> 

<div id="login-page" class="row"> 
    <div class="col l4 s12 z-depth-4 card-panel"> 
     <form class="login-form"> 
      <div class="row"> 
       <div class="input-field col s12 center"> 
        <!--<img src="images/login-logo.png" alt="" class="circle responsive-img valign profile-image-login">--> 
        <p class="center login-form-text">Login test</p> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12"> 
        <i class="material-icons prefix">perm_identity</i> 
        <input id="username" type="text"> 
        <label for="username">Username</label> 
       </div> 
      </div> 
      <div class="row margin"> 
       <div class="input-field col s12"> 
        <i class="material-icons prefix">lock_outline</i> 
        <input id="password" type="password"> 
        <label for="password">Password</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12 m12 l12 login-text"> 
        <input type="checkbox" id="remember-me" /> 
        <label for="remember-me">Remember me</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12"> 
        <a href="index.html" class="btn waves-effect waves-light col s12">Login</a> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s6 m6 l6"> 
        <p class="margin medium-small"><a href="page-register.html">Register Now!</a></p> 
       </div> 
       <div class="input-field col s6 m6 l6"> 
        <p class="margin right-align medium-small"><a href="page-forgot-password.html">Forgot password ?</a></p> 
       </div> 
      </div> 

     </form> 
    </div> 
</div> 

    </main> 
     <footer class="page-footer"> 
     </footer> 

     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script type="text/javascript" src="js/materialize.js"></script> 
     @RenderSection("Scripts", required: false) 
    </body> 
    </html>

Irgendwelche Tipps, was mir fehlt, und wie diese zu beheben?

Quelle

2017-03-11 ebk

-1

versuchen diese:

<div class="container"> 

    <h2>Design in CSS3<small>Inputs</small></h2> 

    <form> 

    <div class="group">  
     <input type="text" required> 
     <span class="highlight"></span> 
     <span class="bar"></span> 
     <label>Name</label> 
    </div> 

    <div class="group">  
     <input type="text" required> 
     <span class="highlight"></span> 
     <span class="bar"></span> 
     <label>Email</label> 
    </div> 

    </form> 



</div>

DEMO HERE

Quelle

2017-03-11 11:03:25

materializeCSS: animiertes Etikett funktioniert nicht

Antwort

Verwandte Themen