md-nav-list with multiple lines has wrong hover effect

[simonsmiley]

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

Hover effect covers the complete line

What is the current behavior?

It only covers part of the line

What are the steps to reproduce?

http://plnkr.co/edit/yV9Vpkkuvf0QUXNNBaGF

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

Make it look better

[Daeluse]

I've been facing this issue as well, the issue is that the CSS sets the height of the md-list-item to 48px. As a temporary fix, use the following CSS, note that in some cases it creates undesired results.

md-list md-list-item 
.md-list-item, md-list a[md-list-item] 
.md-list-item, md-nav-list md-list-item 
.md-list-item, md-nav-list a[md-list-item] 
.md-list-item {
  height: auto;
  min-height: 48px;
}

[kara]

@simonsmiley The Material Design spec only allows list items with a max of three lines, but you're right that 4+ lines look weird. We've made a simple change to make it look a bit saner in this case (see #1466).

Also worth noting that nav lists expect anchor tags, so the styling might not look right if you're trying to use only paragraphs as in the plunker.

<md-nav-list>
   <a md-list-item href="">
      <span md-line> Line 1 </span>
      <span md-line> Line 2 </span>
   </a>
</md-nav-list>

[angular-automatic-lock-bot]

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