diff --git a/pug/contents/text_inputs_content.html b/pug/contents/text_inputs_content.html index 6e95743d49..74dfde8125 100644 --- a/pug/contents/text_inputs_content.html +++ b/pug/contents/text_inputs_content.html @@ -124,17 +124,46 @@

Input fields

</form> </div> -
Floating Labels with CSS only
-

There should not be any problems with initializing the inputs properly, since the floating Labels are rendered with CSS only. The CSS Technique requires to use an empty placeholder in the HTML. You have to put an emtpy space in the placeholder. Putting an empty string wont work.

-
- - +
Floating Labels
+

+ Since MaterializeCSS v2, floating Labels are rendered with CSS only by default. + However, it is required to use a placeholder with a single white space (" ") in the HTML + (providing an empty string will not work!). +

+

+ Important: If you provide a value different than a single white space, + the CSS rules will treat it as a "important" placeholder value and will always render the + labels in "active" state. +

+
+
+
+ + +
+
+
+
+ + +
+

-<div class="input-field">
-  <input value="Daniel" id="first_name2" type="text" class="validate" placeholder=" ">
-  <label class="active" for="first_name2">First Name</label>
+<div class="row">
+  <div class="col s12 m6">
+    <div class="input-field outlined" style="margin: 0 4px;">
+      <input id="first_name2" type="text" class="validate" placeholder=" ">
+      <label class="active" for="first_name2">First Name</label>
+    </div>
+  </div>
+  <div class="col s12 m6">
+    <div class="input-field outlined" style="margin: 0 4px;">
+      <input id="last_name2" type="text" class="validate" placeholder="Doe...">
+      <label class="active" for="last_name2">Last Name</label>
+    </div>
+  </div>
 </div>
         
diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss index 2c3733c5ad..57d501d7d9 100644 --- a/sass/components/forms/_input-fields.scss +++ b/sass/components/forms/_input-fields.scss @@ -89,6 +89,7 @@ textarea.materialize-textarea { color: $input-focus-color; } &:focus:not([readonly]) + label, + &:not([placeholder=' ']) + label, &:not(:placeholder-shown) + label { //font-size: 12px; // md.sys.typescale.body-small.size // https://stackoverflow.com/questions/34717492/css-transition-font-size-avoid-jittering-wiggling @@ -187,6 +188,7 @@ textarea.materialize-textarea { color: $input-focus-color; } &:focus:not([readonly]) + label, + &:not([placeholder=' ']) + label, &:not(:placeholder-shown) + label { top: -8px; left: 16px;