Merge pull request #391 from mauromascarenhas/textarea-fix

Fix textarea padding
materializecss · Jul 12, 2023 · f613891 · f613891
2 parents 3f89544 + f967529
commit f613891
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/pug/contents/text_inputs_content.html b/pug/contents/text_inputs_content.html
@@ -319,21 +319,33 @@ <h3 class="header">Textarea</h3>
           <form class="col s12">
             <div class="row">
               <div class="input-field col s12">
-                <textarea id="textarea1" class="materialize-textarea"></textarea>
+                <textarea id="textarea1" class="materialize-textarea" placeholder=" "></textarea>
                 <label for="textarea1">Textarea</label>
               </div>
             </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <textarea id="textarea2" class="materialize-textarea" placeholder="A custom placeholder :)"></textarea>
+                <label for="textarea2">Textarea with placeholder</label>
+              </div>
+            </div>
           </form>
         </div>
         <pre><code class="language-markup">
   &lt;div class="row">
     &lt;form class="col s12">
       &lt;div class="row">
         &lt;div class="input-field col s12">
-          &lt;textarea id="textarea1" class="materialize-textarea">&lt;/textarea>
+          &lt;textarea id="textarea1" class="materialize-textarea" placeholder=" ">&lt;/textarea>
           &lt;label for="textarea1">Textarea&lt;/label>
         &lt;/div>
       &lt;/div>
+      &lt;div class="row">
+        &lt;div class="input-field col s12">
+          &lt;textarea id="textarea2" class="materialize-textarea" placeholder="A custom placeholder :)">&lt;/textarea>
+          &lt;label for="textarea2">Textarea with placeholder&lt;/label>
+        &lt;/div>
+      &lt;/div>
     &lt;/form>
   &lt;/div>
         </code></pre>
@@ -351,7 +363,7 @@ <h5>Icon Prefixes</h5>
             <div class="row">
               <div class="input-field col s12">
                 <i class="material-icons prefix">mode_edit</i>
-                <textarea id="icon_prefix2" class="materialize-textarea"></textarea>
+                <textarea id="icon_prefix2" class="materialize-textarea" placeholder=" "></textarea>
                 <label for="icon_prefix2">Message</label>
               </div>
             </div>
@@ -444,13 +456,13 @@ <h3 class="header">Character Counter</h3>
           <form class="col s12">
             <div class="row">
               <div class="input-field col s6">
-                <input id="input_text" type="text" maxlength="10">
+                <input id="input_text" type="text" maxlength="10" placeholder=" ">
                 <label for="input_text">Input text</label>
               </div>
             </div>
             <div class="row">
               <div class="input-field col s12">
-                <textarea id="textarea2" class="materialize-textarea" maxlength="120"></textarea>
+                <textarea id="textarea2" class="materialize-textarea" maxlength="120" placeholder=" "></textarea>
                 <label for="textarea2">Textarea</label>
               </div>
             </div>
@@ -461,13 +473,13 @@ <h3 class="header">Character Counter</h3>
       &lt;form class="col s12">
         &lt;div class="row">
           &lt;div class="input-field col s6">
-            &lt;input id="input_text" type="text" maxlength="10">
+            &lt;input id="input_text" type="text" maxlength="10" placeholder=" ">
             &lt;label for="input_text">Input text&lt;/label>
           &lt;/div>
         &lt;/div>
         &lt;div class="row">
           &lt;div class="input-field col s12">
-            &lt;textarea id="textarea2" class="materialize-textarea" maxlength="120">&lt;/textarea>
+            &lt;textarea id="textarea2" class="materialize-textarea" maxlength="120" placeholder=" ">&lt;/textarea>
             &lt;label for="textarea2">Textarea&lt;/label>
           &lt;/div>
         &lt;/div>

diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss
@@ -284,9 +284,10 @@ textarea {
   background-color: transparent;
 
   &.materialize-textarea {
+    padding-top: 26px !important;
+    padding-bottom: 4px !important;
     line-height: normal;
     overflow-y: hidden; /* prevents scroll bar flash */
-    padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */
     resize: none;
     min-height: $input-height;
     box-sizing: border-box;