How do I fix my label always on Top?
Normal behavior: stays in input , when we click on input (focus) it stays on input
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
So I understand your question, if you want the Label of input always at the top without the animation you have to put in .input-field label the same values as .input-field label:not(.label-icon).active
.input-field label {
-webkit-transform: translateY(-14px) scale(0.8);
transform: translateY(-14px) scale(0.8);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
Run the Snippet and see the example working with the Label always at the top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.input-field label {
-webkit-transform: translateY(-14px) scale(0.8);
transform: translateY(-14px) scale(0.8);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="row">
<div class="input-field col s6">
<input value="" id="first_name2" type="text" class="validate">
<label class="fixed" for="first_name2">First Name</label>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>Luiz Felipe, this example was taken from the MaterializeCSS showCase :
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
div the label is fixed at the top and the placeHolder stays within the input
div label stays within input and climbs up input when it focuses Your question is a bit confusing because the code you posted should have the expected behavior. Are not you confusing something of the question? The expected code or behavior?