Not sure if its a bug
mdListItem should adjust its height based on the the contents projected inside it
Looks like the height of each mdListItem is fixed
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
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.
Angular4 Material2
@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._