Merge pull request #383 from mauromascarenhas/floating-labels

Allow "valid" placeholders for form inputs
materializecss · Jun 22, 2023 · 807d65b · 807d65b
2 parents ee68fac + 85297dc
commit 807d65b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/pug/contents/text_inputs_content.html b/pug/contents/text_inputs_content.html
@@ -124,17 +124,46 @@ <h3 class="header">Input fields</h3>
     &lt;/form>
   &lt;/div>
         </code></pre>
-        <h5>Floating Labels with CSS only</h5>
-        <p>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.</p>
-          <div class="input-field outline">
-            <input value="Daniel" id="first_name2" type="text" class="validate" placeholder=" ">
-            <label class="active" for="first_name2">First Name</label>
+        <h5 id="floating-labels">Floating Labels</h5>
+        <p>
+          Since <b>MaterializeCSS v2</b>, 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!).
+        </p>
+        <p>
+          <strong><b>Important:</b></strong> 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.
+        </p>
+          <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>
 
         <pre><code class="language-markup">
-&lt;div class="input-field">
-  &lt;input value="Daniel" id="first_name2" type="text" class="validate" placeholder=" ">
-  &lt;label class="active" for="first_name2">First Name&lt;/label>
+&lt;div class="row">
+  &lt;div class="col s12 m6">
+    &lt;div class="input-field outlined" style="margin: 0 4px;">
+      &lt;input id="first_name2" type="text" class="validate" placeholder=" ">
+      &lt;label class="active" for="first_name2">First Name&lt;/label>
+    &lt;/div>
+  &lt;/div>
+  &lt;div class="col s12 m6">
+    &lt;div class="input-field outlined" style="margin: 0 4px;">
+      &lt;input id="last_name2" type="text" class="validate" placeholder="Doe...">
+      &lt;label class="active" for="last_name2">Last Name&lt;/label>
+    &lt;/div>
+  &lt;/div>
 &lt;/div>
         </code></pre>
 

diff --git 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;