Search code examples
angularangular-material

Material raised button is getting cut when placed inside a list

Material raised button is being cut when placed inside a list. How to fix this issue?

When I override the mdc-list-item__content class in the browser, I am able to make it look properly. But I am not sure if this is the right way, since it does not work when placed in css file.

enter image description here enter image description here

Stackblitz

Solution

  • For buttons inside of list documentation recommend using mat-action-list. Check it out here https://material.angular.io/components/list/overview#action-lists. So if you wrap button in mat-action-list it won't be cut off.