Components: mdListItem height auto-adjust

Created on 16 Apr 2017  路  7Comments  路  Source: angular/components

Bug, feature request, or proposal:

Not sure if its a bug

What is the expected behavior?

mdListItem should adjust its height based on the the contents projected inside it

What is the current behavior?

Looks like the height of each mdListItem is fixed

What are the steps to reproduce?

http://embed.plnkr.co/loTqOC/
Here I have added an image to mdListItem and I expect the height of mdListItem to increase to accommodate the image

What is the use-case or motivation for changing an existing behavior?

I have a custom component showing Friend_Info. I want to list all the friends using mdList. Each mdListItem will have a checkbox and Friend_Info component.

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

Angular4 Material2

Is there anything else we should know?

All 7 comments

4071 It's not a bug

@gedclack I don't see anything about list items in the issue you linked.
I'm looking for the same expected behavior as @neo-split , but I had a list with settings displayed as both inputs and selects in an md-list.

After updating to from Angular 2.4.0 and Material 2.0.0-beta.2 to Angular 4.0.2 and Material 2.0.0-beta.3 I now see the same behavior.
Here's a plunk which show this behavior with input and select components: https://embed.plnkr.co/AQqUOsA4PjDQbvEysg1g/

To "fix" it, I instead use an md-card with a md-card-content per setting. But if this new behavior is a bug, I'd be interested to know.

I think this is resolved in the latest version. Feel free to re-open if it's not.

@jelbourn
not resolved. in 2.0.0-beta.12 it is fixed to 48px

workaround 1:

mat-list.<<my-list-class>> ::ng-deep  .mat-list-item-content {
  height: <<new height>>;
}

workaround 2:

<mat-list-item *ngFor="<<let something of somethings>>">
  <div style="height: <<my-height>>; width: 100%;">
    <span matLine></span><span matLine></span><span matLine></span><span matLine></span>
    <<my-line-content>>
  </div>
</mat-list-item>

(material applies 'mat-multi-line' class when there are more than 3 matLine) (IMHO we probably need something like MatFitContent directive on mat-list-item that does the same)

When can we expect this issue to be fixed?
I'm using "@angular/material": "2.0.0-beta.12" and spend 1 day on trying to adjust mat-list-item height to my needs.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

julianobrasil picture julianobrasil  路  3Comments

jelbourn picture jelbourn  路  3Comments

constantinlucian picture constantinlucian  路  3Comments

dzrust picture dzrust  路  3Comments

kara picture kara  路  3Comments