materializeCSS : 애니메이션 라벨이 작동하지 않음

저는 materializecss에 익숙해지기 위해 노력 중이며 현재 로그인 상자에서 작업 중입니다. 문제는 각 입력 필드의 자리 표시 자 레이블이 입력 필드를 클릭하면 위로 이동한다고 가정합니다. 그러나 이것은 발생하지 않으며, 일부 텍스트를 입력 할 때 레이블 텍스트가 그대로 남아 있습니다.materializeCSS : 애니메이션 라벨이 작동하지 않음

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

<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>

내가 놓친 거지 무엇에 대한 모든 팁을, 어떻게이 문제를 해결하기 위해 다음과 같습니다

내 html 파일입니까?

출처

2017-03-11 ebk

-1

이 하나를 시도해보십시오

<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

출처

2017-03-11 11:03:25

materializeCSS : 애니메이션 라벨이 작동하지 않음

답변

관련 문제