fix(input): baseline alignment on textarea (#3714)

* fix(input): baseline alignment on textarea * add mdTextareaAutosize to baseline demo
angular · Mar 27, 2017 · 7cff349 · 7cff349
1 parent cb85eeb
commit 7cff349
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/demo-app/baseline/baseline-demo.html b/src/demo-app/baseline/baseline-demo.html
@@ -11,7 +11,11 @@
     <md-radio-button value="option_3">Radio 3</md-radio-button>
     | Text 4 |
     <md-input-container>
-      <input mdInput placeholder="Input">
+      <input mdInput placeholder="Input" value="Text Input">
+    </md-input-container>
+    | Text 5 |
+    <md-input-container>
+      <textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>
     </md-input-container>
     | Text After
   </md-card-content>
@@ -31,7 +35,11 @@ <h1>
       <md-radio-button value="option_3">Radio 3</md-radio-button>
       | Text 4 |
       <md-input-container>
-        <input mdInput placeholder="Input">
+        <input mdInput placeholder="Input" value="Text Input">
+      </md-input-container>
+      | Text 5 |
+      <md-input-container>
+        <textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>
       </md-input-container>
       | Text After
     </h1>

diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
@@ -84,6 +84,9 @@ $mat-input-underline-disabled-background-image:
   padding: 0;
   width: 100%;
 
+  // Needed to make last line of the textarea line up with the baseline.
+  vertical-align: bottom;
+
   .mat-end & {
     text-align: right;