Materialize CSS - sticky label at the top

Asked

Viewed 931 times

1

How do I always pin my label to Top?

Normal behavior: stays in input, when we click on input (Focus) it sits on top of the 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>
javascript jquery css angularjs materialize

  • Could you edit your question by putting excerpt of what you have already developed? so it is easier for us to help you.

  • No need, but I’ll put a snippet found on the same site of Materialize css. is something that anyone who knows the tool, knows what I’m talking about

  • Exactly who knows the tool or its specific materialize put at least the link to it so we can see which classes it uses because there is probably a class that defines it in the tool itself

  • 1

    Always when? Apparently he’s already on top, even when the input is empty... It only has an effect when press F5 which is to do the label rise to before the input, is that effect you want to remove?

2 answers

2


Version 1.0.0 (most recent)

In the most current version of Materialize to leave the label at the top just add in the class active, for example <label class="active" for="first_name">Label Active</label>

inserir a descrição da imagem aqui

Another detail important is that for the label get on top, the input that comes before her must be with the placeholder empty, then in the input preceding that label you have to leave the property empty placeholder="". This happens because automatically when you use placeholder in the input to label related already stands at the top.

Dry code from the image above.

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
	<form class="col s12">
		<div class="row">
			<div class="input-field col s6">
				<input placeholder="" id="first_name" type="text" class="validate">
				<label class="active" for="first_name">Label Active</label>
			</div>
			<div class="input-field col s6">
				<input id="first_name2" type="text" class="validate">
				<label for="first_name2">Labem padão</label>
			</div>
			<div class="input-field col s6">
				<input placeholder="texto do placeholder" id="first_name2" type="text" class="validate">
				<label for="first_name2">Labem padão</label>
			</div>
		</div>
	</form>
</div>

Version 0.100.2 (old version)

From what I understand your question, if you want the label of input always at the top without the animation you have to put in the .input-field label the same values of .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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>

0

Luiz Felipe, this example was taken from showcase of Materializecss:

<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>
  • At first div the label is fixed at the top and the placeHolder stays inside the input
  • In the second div the label stays inside the input and climb up the input when seal

Your question is a little confusing because the code you posted should have the expected behavior. Aren’t you confusing something of the question? The code or expected behaviour?

Reference:

http://materializecss.com/forms.html

Browser other questions tagged javascript jquery css angularjs materialize

You are not signed in. Login or sign up in order to post.