components: bug(mat-card): mat-elevation-zx no longer working for mat-card after upgrade to version 15
Is this a regression?
- 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:
- in a template, use
<mat-card class="mat-elevation-z8">test</mat-card>
- notice that the elevation helper class has no effect on the mat-card’s elevation
Expected Behavior
Expecting the mat-elevation-z_x_ 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
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 15
- Comments: 32 (2 by maintainers)
Commits related to this issue
- fix(material/card): allow for elevation to be overridden Fixes that users weren't able to override the card elevation by setting the elevation classes. Fixes #26094. — committed to crisbeto/material2 by crisbeto 2 years ago
- fix(material/card): allow for elevation to be overridden Fixes that users weren't able to override the card elevation by setting the elevation classes. Fixes #26094. — committed to crisbeto/material2 by crisbeto 2 years ago
- fix(material/card): allow for elevation to be overridden Fixes that users weren't able to override the card elevation by setting the elevation classes. Fixes #26094. — committed to crisbeto/material2 by crisbeto 2 years ago
- fix(material/card): allow for elevation to be overridden Fixes that users weren't able to override the card elevation by setting the elevation classes. Fixes #26094. — committed to crisbeto/material2 by crisbeto 2 years ago
In that spirit, this should re-create all of them.
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 😃
A workaround until better comes up.
Any news on this, it has been opened for more than 2 months. I would rather not implement a workaround.
Adding these lines in global-css worked for me (workaround)
Version: @angular/material: 15.2.4
Doesnt work in 16.0.1
u got it, it is a crazy workaround, until someone in google figured out a fix.
confirmed: https://stackblitz.com/edit/angular-v7wcjs?file=src%2Fmain.ts
notice, that @includes with elevation helpers does not work on mat-card, too:
WORKS! THANK YOU SO MUCH!
Still not working “@angular/material”: “^15.2.3”,
That doesn’t really give desired results… (should be the whole card)
It won’t be fixed for 15.1.0.
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;
Try to just grow the height of mat-card, works for me the elevation.
Any updates on this?
Oof. I mean, that’s good to know as a workaround, but that’s not really an acceptable fix.
This is working. mat-card-content class=“mat-elevation-z8”
Use mat-card-content tag.
Will this be fixed in v15.1.0 or do we have to employ our workarounds for now?
It adds the step if you check the “I use Angular material” checkbox. The migration tool is mentioned in the Read Further link