md-list-item with ng-click causes font size to be smaller (and other oddities)

[hanthomas]

The following Plunkr demonstrates the problem in 0.9rc1: http://plnkr.co/edit/QrWRRWzXteZ1XynXRS7c?p=preview

It seems that the underlying issue is that the content of md-list-item is inheriting the styles from md-button class that wraps the content. This only happens where there's an ng-click directive on the list item Besides font size, it seem that other potentially undesirable styles such as line-height and white-space also affect the appearance and behavior.

[marcysutton]

A clickable list item with a button needs a larger hit area than a list item, so the line height should stay as-is. But the font-size is an easy fix with font-size: inherit;

[hanthomas]

Thanks for the workaround. Regarding line-height + white-space, I understand your reasoning. The only problem is that when the text is too long, because white-space is set to nowrap, it goes past the edge, ignoring padding and margin. Looks ugly. I tried a couple of ideas such as removing the nowrap, which results in weird wrapping issues (hence my complaint about line-height). Perhaps md-list-item can be made so that it either truncates the text or shows ellipses.

[ThomasBurleson]

@hanthomas - please provide snapshot or CodePen or Plunkr that demonstrates this issue.

[hanthomas]

@ThomasBurleson - I made a change to my original plunkr which demonstrates the problem:

http://plnkr.co/edit/QrWRRWzXteZ1XynXRS7c?p=preview

Notice that the text doesn't truncate at a nice spot when ng-click exists. Without ng-click, the text wraps at a good spot where there's some spacing. The difference in behavior based solely on the existence of ng-click is significant.

[ThomasBurleson]

@hanthomas - Thank you.

[marcysutton]

@hanthomas I'm adjusting the font size and adding white-space: normal to make list buttons behave differently than regular buttons. Can you open a separate issue about the text truncation?

[hanthomas]

@marcysutton - Thanks for the fix. As you suggest, I will make a separate issue about text truncation.