Components: Height of mat-list-item doesn't increase with increase in textarea height

Created on 29 Nov 2017 · 8Comments · Source: angular/components

Bug, feature request, or proposal:

Bug
mat-list-item doesn't change size according to height of textarea

What is the expected behavior?

Height of should change according to size of textarea

What is the current behavior?

size of mat-list-item remains the same even though height of textarea is increased

What are the steps to reproduce?

Here is a link of StackBlitz:
https://stackblitz.com/edit/angular-gk9mvj

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "^5.0.0-rc.0",
"@angular/cdk": "^5.0.0-rc.1",
"@angular/common": "^5.0.0-rc.0",
"@angular/compiler": "^5.0.0-rc.0",
"@angular/core": "^5.0.0-rc.0",
"@angular/flex-layout": "^2.0.0-beta.10-4905443",
"@angular/forms": "^5.0.0-rc.0",
"@angular/http": "^5.0.0-rc.0",
"@angular/material": "^5.0.0-rc.1",
"@angular/platform-browser": "^5.0.0-rc.0",
"@angular/platform-browser-dynamic": "^5.0.0-rc.0",
"@angular/platform-server": "^5.0.0-rc.0",
"@angular/router": "^5.0.0-rc.0",

Source

turab007

👍2

Most helpful comment

You can override the default styles using yours with higher specificity:

.app-class .mat-list-item {
  height: auto;
}

<mat-list class="app-class">
  <mat-list-item>
    <mat-form-field>
      <textarea matInput rows="7"></textarea>
    </mat-form-field>
  </mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>

Checkout over here: https://stackblitz.com/edit/angular-list-item-height

julianobrasil on 2 Dec 2017

👍13 🚀2

All 8 comments

AFAIK, this is the expected behavior: one low height row per list element. Try a gridlist (with 1 column) instead of a list.

julianobrasil on 29 Nov 2017

I recently updated material and before the update it seemed to work just fine. I was previously using beta.6

turab007 on 30 Nov 2017

❤1 😕1

If you take a look at the code you'll see the max height (its not constant, but it has some allowed values):

https://github.com/angular/material2/blob/27dfd159c3c8e15983e45bdcc3e9827a7ac5220a/src/lib/list/list.scss#L12-L27

julianobrasil on 30 Nov 2017

But shouldn't the height of the parent element change if it's children's height has changed?

turab007 on 30 Nov 2017

You can override the default styles using yours with higher specificity:

.app-class .mat-list-item {
  height: auto;
}

<mat-list class="app-class">
  <mat-list-item>
    <mat-form-field>
      <textarea matInput rows="7"></textarea>
    </mat-form-field>
  </mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>

Checkout over here: https://stackblitz.com/edit/angular-list-item-height

julianobrasil on 2 Dec 2017

👍13 🚀2

Yes i have solved it with providing css of higher specifity, but i believe height should be auto by default.
However i am closing this issue as this is not an issue but an expected behavior.

turab007 on 5 Dec 2017

You can override the default styles using yours with higher specificity:
.app-class .mat-list-item {
  height: auto;
}

I had a slightly different usecase where the textarea row height can change between 1 and 6 via cdkTextareaAutosize and I though I needed to do something complex like get a hook into that directive to trigger a change ... but simply overriding the default styles with higher specificity as you suggested, worked for me too 👍

https://stackblitz.com/edit/mat-list-height

Thank You @julianobrasil