Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mdListItem height auto-adjust #4114

Closed
neo-split opened this issue Apr 16, 2017 · 7 comments
Closed

mdListItem height auto-adjust #4114

neo-split opened this issue Apr 16, 2017 · 7 comments

Comments

@neo-split
Copy link

neo-split commented Apr 16, 2017

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?

@gedclack
Copy link

#4071 It's not a bug

@IAmRaszagal
Copy link

@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.

@jelbourn
Copy link
Member

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

@amitport
Copy link
Contributor

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

@amitport
Copy link
Contributor

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)

@DariuszOstolski
Copy link

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.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants