CODEWITHSUNDEEP
angularjsangular-material
Bruno Finger
Bruno Finger

Reputation: 2563

Stop nested ripple effect

I'm working with Angular Materia 0.10.1.

I have a md-button nested inside a md-list-item. Both elements triggers the ripple effect when clicked, and when I click the button, it triggers the ripple effect on both elements at the same time. I want to have ripples on the button or on the list element only, but never both at the same time.

<md-list flex>
    <md-list-item ng-click="a('a')">
      <p>Some name</p>
      <md-button class="md-accent md-raised" ng-click="b('b', $event)">Do something</md-button>
    </md-list-item>
 </md-list>

I've used $event.stopPropagation() but it doesn't stop the ripples in the same way it stops nested click events.

This Plunker can demonstrate it better.

Upvotes: 2

Views: 1624

Answers (1)

ajmajmajma
ajmajmajma

Reputation: 14216

It seems to be something built into the md-primary class and how it works with the list item. If you look at the examples there are a few that have side buttons that do not exhibit this behavior

by simply swapping the class on your button to md-secondary it seems to fix your issue (styling is a separate one now though)

 <md-button class="md-secondary md-raised" ng-click="b('b')">Do something</md-button>

http://plnkr.co/edit/4fo8u190gpKyoHznVbFM?p=preview

Alternatively, the example uses md-icon instead of buttons and that seems to work too.

Upvotes: 1

Related Questions