Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove box-shadow from Angular Material <mat-chip>

Is there any way to remove the box-shadow from mat-chips in Angular Material?

<mat-chip-list>
    <mat-chip>Papadum</mat-chip>
</mat-chip-list>

The chips appear to have a CSS style for the box-shadow, but disabling this style or overriding it doesn't work.

transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);

I suspect there must be a simple way to disable this shadow, but I can't figure it out.

like image 581
Daniel Kuhlwein Avatar asked Dec 06 '17 17:12

Daniel Kuhlwein


People also ask

How do you unset a box shadow?

The box-shadow styles are used to pay attention to the content. Primer CSS Box Shadow Remove style is mainly used to remove the box-shadow. To remove the box-shadow, we will add an additional class . box-shadow-none.

How do I disable mat chips?

Chips can be selected via the selected property. Selection can be disabled by setting selectable to false on the <mat-chip-list> .

What is angular material contact chips?

The md-contact-chips, an Angular Directive, is an input control built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. The user can select one of these and add it to the list of availble chips.


1 Answers

To all new readers coming to read this post. Apply this class in your 'mat-chip' element to remove z index. This will remove shadow also.

class="mat-elevation-z0"
like image 178
Deepak K J Avatar answered Sep 28 '22 06:09

Deepak K J