Closed tjlav5 closed 8 years ago
@tjlav5 - Please provide a CodePen or Plunkr that demonstrates this issue. Here are some starter demo templates that you can use/fork:
An md-avatar-icon
child of a md-list-item
gets a simple theme: color & background-color.
https://github.com/angular/material/blob/1d29ef9570340b7fc956ebc49bf543180cc2fdca/src/components/list/list-theme.scss#L15
CodePen: http://codepen.io/anon/pen/gaEOvo
The first md-list-item
does not have an ng-click attr, the second does
Once the md-list-item
has a click event handler associated with it (ng-click
), a button
and md-list-item-inner
come into play. When that happens, the theme for the md-avatar-icon
no longer applies the colors...
@tjlav5: I've applied the style change and have a working demo here: http://codepen.io/programmist/pen/ZQYZay
Please verify that it's working for you.
@programmist Yep, that did the trick.
This has been waiting on PR #6181.
It seems that the css for the md-avatar-icon is a bit too specific.
When adding a click fn to the containing md-list-item, the new structure becomes:
md-list-item -- button ----.md-list-item-inner ------.md-avatar-icon
Is there any reason to not have an md-avatar-icon inside a clickable list-item? Or is it just an omission? If the later I can submit a quick PR.
Something along these lines would fix my use case:
OR
Cheers