Im trying to get familiar with the materializecss, and is currently working on a login box. The problem is that the placeholder label in each inputfield is suppose to move up when I click on the inputfield. However this doesn't happen, and when i type some text the label text is still there.
This is how it looks like when I type something in the input box.
Here is my html file:
<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>
Any tips to what I am missing, and how to fix this?
try this one:
<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>