CODEWITHSUNDEEP
cssangular-material2angular5
user5047085
user5047085

Reputation:

<mat-card> is not raised - there is no border

I have this simple html:

 <mat-card>
    <mat-card-content>
      <code>{{file}}</code>
    </mat-card-content>
 </mat-card>

for some reason when the mat-card element is rendered, it's not raised - I am looking to get something like this:

enter image description here

does anyone know if I might be missing some additional CSS? I don't get it.

Upvotes: 12

Views: 21070

Answers (4)

csharpsql
csharpsql

Reputation: 2330

My issue was that I didnt have a theme imported in my styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Upvotes: 16

Simon_Weaver
Simon_Weaver

Reputation: 145880

If you have implemented a custom theme, make sure a parent of your mat-card has this theme applied. This will typically be the app root.

My custom theme is rr-theme-light - so I had to add this class to a parent of mat-card in order to get the shadow to appear at all.

enter image description here

Upvotes: 0

brijmcq
brijmcq

Reputation: 3418

You probably just need a margin in your mat-card.

<mat-card style="margin:2em;">
...more code
</mat-card>

Here's a stackblitz demo

Upvotes: 16

user5047085
user5047085

Reputation:

I think you have to add a margin to the mat-card, so maybe

@Component({
  styles: [`

  mat-card { margin:2em;  }

  `]
})

Upvotes: 1

Related Questions