bug(mat-card): mat-elevation-zx no longer working for mat-card after upgrade to version 15

[ChristopherSnay]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

I have some mat-cards with specific elevations set, like for example: class=mat-elevation-z4 After the upgrade from 14 to 15, the cards are no longer affected by any mat-elevation classes I add.

Reproduction

Steps to reproduce:

1. in a template, use <mat-card class="mat-elevation-z8">test</mat-card>
2. notice that the elevation helper class has no effect on the mat-card's elevation

Expected Behavior

Expecting the mat-elevation-zx classes to modify the mat-card's elevation.

Actual Behavior

elevation is not affected by adding, for example, class="mat-elevation-z8"

Environment

• Angular: 15.0.0
• CDK/Material: 15.0.0
• Browser(s): Edge/Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[RobinKamps]

confirmed: https://stackblitz.com/edit/angular-v7wcjs?file=src%2Fmain.ts

notice, that @includes with elevation helpers does not work on mat-card, too:

mat-card {
  @include mat.elevation(8);
}

[crisbeto]

I spent some time trying to fix this in #26098, but it ended up breaking too many internal apps. For future reference, here's what I tried:

1. Switching the card theme to use the private-theme-overridable-elevation mixin instead of private-theme-elevation. This is the correct way to fix it, but it ends up increasing the specificity too much which was breaking some style overrides.
2. Switching the box-shadow to a CSS variable and setting variable in the mat-elevation-z* classes. This reduces the specificity, but appears not to be enough for some cases.
3. Using the mat-card tag selector to set the box-shadow instead of .mat-mdc-card. This seems to reduce the specificity a bit too much and is against our CSS selector guidelines.

[hhsissi]

Hi,

Same problem with mat-elevation-z* classes and elevation helpers: no elevation anymore. By the way, i don't know if this is done on purpose, but it seems running "mdc-migration" command in not listed on angular material 14 -> 15 migration guide.

FI class styles are applied, but they are immediately preceeded by mdc styles. So basicaly they are ignored

[ChristopherSnay]

By the way, i don't know if this is done on purpose, but it seems running "mdc-migration" command in not listed on angular material 14 -> 15 migration guide.

It adds the step if you check the "I use Angular material" checkbox. The migration tool is mentioned in the Read Further link

In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. Read further

[emonney]

Will this be fixed in v15.1.0 or do we have to employ our workarounds for now?

[crisbeto]

It won't be fixed for 15.1.0.

[michaelfaith]

I noticed that the mdc-migration schematic is changing cards to use outline for appearance, when they didn't originally use it. Was that done intentionally as a stopgap because of the elevation styles not working? If not, I can open a separate issue for that.

[just4td]

This is working. mat-card-content class="mat-elevation-z8"

Use mat-card-content tag.

[michaelfaith]

That doesn't really give desired results... (should be the whole card)

[just4td]

sounds a bit crazy, but you need to move all your mat-card to the outer content;

mat-card
  mat-card-content class=" .. elevation.."
    mat-card (the one that u want)

[michaelfaith]

Oof. I mean, that's good to know as a workaround, but that's not really an acceptable fix.

[just4td]

u got it, it is a crazy workaround, until someone in google figured out a fix.

[yannickcare]

Any news on this, it has been opened for more than 2 months. I would rather not implement a workaround.

[dnespola]

Still not working "@angular/material": "^15.2.3",

[kibetmasi]

Any updates on this?

[simonbauer-gepardec]

Adding these lines in global-css worked for me (workaround)

.mat-mdc-card.mat-elevation-z6 {
  @include mat.elevation(6);
}

.mat-mdc-card.mat-elevation-z8 {
  @include mat.elevation(8);
}

.mat-mdc-card.mat-elevation-z10 {
  @include mat.elevation(10);
}

// add more mat-elevations that are needed...

Version: @angular/material: 15.2.4

[michaelfaith]

In that spirit, this should re-create all of them.

@for $i from 0 through 24 {
  .mat-mdc-card.mat-elevation-z#{$i} {
    @include mat.elevation($i);
  }
}

[InsaneProgZ]

Try to just grow the height of mat-card, works for me the elevation.

[ChristopherSnay]

Try to just grow the height of mat-card, works for me the elevation.

What does this mean?

[InsaneProgZ]

I have this issue, with same version, but for some reason the height of mat-card box was the exactly size of card, and for this reason looks like mat-elevation-zx doesn't work, if you grow the height the mat-elevation-zx appear correctly. Sorry I don't speak english very well, do you understand?

[develmood]

Same for mat-menu. The fix from @simonbauer-gepardec works:

@for $i from 0 through 24 {
  .mat-mdc-menu-panel.mat-elevation-z#{$i} {
    @include mat.elevation($i);
  }
}

[Gyorgy-Szy]

I am using Angular Material ^15.2.6, and I do have an extra class called mat-mdc-elevation-specific added automatically to the card. So a workaround can be that you add this class to the mat-card as well (gives specificity boost :)

<mat-card class="mat-mdc-elevation-specific mat-elevation-z4">
...

A workaround until better comes up.

[AnnaMakos]

This is working. mat-card-content class="mat-elevation-z8"

Use mat-card-content tag.

WORKS! THANK YOU SO MUCH!

[Dzivo]

Doesnt work in 16.0.1

[User00015]

Also running into this issue. From what I can tell, .mat-elevation-z* is being overridden by .mat-mdc-card which is pulling from the theme below the elevation style. This seems like a pretty obvious oversight in how styling order is applied.

CSS classes are posted in order.

.mat-mdc-card {
    ...
    box-shadow: var(--mdc-elevated-card-container-elevation);
  ...
}

**What I want**
<style>
.mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

**What I'm getting**
.mat-mdc-card {
   ...
    --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); 
  ...
}

The styling fix posted above works, or I could just roll my own. But this is pretty clearly not working as expected.

[SBahre]

Adding these lines in global-css worked for me (workaround)

.mat-mdc-card.mat-elevation-z6 {
  @include mat.elevation(6);
}

.mat-mdc-card.mat-elevation-z8 {
  @include mat.elevation(8);
}

.mat-mdc-card.mat-elevation-z10 {
  @include mat.elevation(10);
}

// add more mat-elevations that are needed...

Version: @angular/material: 15.2.4

This works in angular 16 also.

We also have to add the following line on the top of style.scss file. Reference @use "@angular/material" as mat;

[alandsidel]

Most workarounds posted here (those declaring CSS classes) aren't working for me in 15.2,9, a year after this issue was opened. Only the nested card solution seems to work with a card wrapping a card-content, wrapping another card. Something interesting though: I'm attempting to show an elevated card inside a mat-tab which is animated, as default. During the animation the card elevation is visible, it disappears as soon as the animation ends.

Maybe this can help somebody track down the issue more easily.

[kamerc]

This is still an issue in 16.2.8

[JessyParis]

I am using Angular Material ^15.2.6, and I do have an extra class called mat-mdc-elevation-specific added automatically to the card. So a workaround can be that you add this class to the mat-card as well (gives specificity boost :)

<mat-card class="mat-mdc-elevation-specific mat-elevation-z4">
...

A workaround until better comes up.

This workaround works for mat-sidenav too with Material 17 :-)

[Deliana90]

when fixed?

[dzivoing]

Is there a way to style this globally somehow ?

[ChristopherSnay]

Is there a way to style this globally somehow ?

https://github.com/angular/components/issues/26094#issuecomment-1490245622

[liuyankit]

why is this still not fixed? Even the demo isn't working. https://material.angular.io/guide/elevation#overridable-elevation

[Deliana90]

dead project? when will google shutdown angular?

[GoodGuyGregory]

Any updates on this? The imports trick worked in my global styles.scss.

[kai1992cool]

any updates on this?

[StoyanStAtanasov]

🤦‍♂️ Still broken in ng 18.2.4, workaround (https://github.com/angular/components/issues/26094#issuecomment-1531183165)_ works for me.

[ManicardiFrancesco]

Just tested and it's still broken in 19.0 - i kept the

@for $i from 0 through 24 {
    mat-card.mat-elevation-z#{$i} {
        @include mat.elevation($i);
    }
}

workaround in my styles.scss