0

I'm using mat-accordion component in my application, however even though it is clearly stated in the documentation here -> https://material.angular.io/components/expansion/overview#expansion-overview the default displayMode is border + raised. When I run the example code for expansion panel from the link above in my app, it shows as flat. When I try to explicitly set displayMode property to 'default' it shows as flat. What am I missing?

user1617735
  • 451
  • 5
  • 16
  • Can you please reproduce this issue in stackblitz? – yurzui Feb 09 '22 at 19:00
  • @yurzui Well the problem is there it works :) It doesn't in my app and it's already quite bulky to try to migrate it to stackblitz – user1617735 Feb 09 '22 at 19:29
  • I would compare Angular and Angular material versions or tried to create a simple expansion panel in your app and see how it works – yurzui Feb 09 '22 at 19:32
  • @yurzui Yep, I literally took the code from the docs example and added it to my app, it's flat. What I have is @angular/material@13.2.0. – user1617735 Feb 09 '22 at 19:54
  • I just created a project from scratch and tried the panel and it works fine, so I suppose it's something in the styling that is overriding how expansion panel looks? – user1617735 Feb 09 '22 at 23:25
  • Try commenting some parts of your application and you should be able to find the cause – yurzui Feb 10 '22 at 02:07

1 Answers1

0

Most likely something else is overwriting your css. It can happen when css is bleeding from other components if they use ::ng-deep, :host etc. The use of !important even on encapsulated styles might be overwriting. This is just a guess.

This adds the raised effect. Add this to your component stylesheet and observe if normal visuals return.

.mat-expansion-panel:not([class*=mat-elevation-z]) {
    box-shadow: 0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f !important;
}

If they return then something is indeed overwriting material default css. Find the problem and fix it.

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • Thanks, this helps indeed. However I can't understand what can possibly override this. I barely even have CSS in my project and all I have are custom classes, I didn't override any of the existing ones. Can it be because I'm using both bootstrap and angular material? – user1617735 Feb 11 '22 at 16:10