How can I forcefully change the padding inside a mat-expansion-panel-body?

96
February 14, 2022, at 1:40 PM

so I just created an expansion panel and it's working fine (it's very hardcoded though). I need to, however, eliminate a padding entirely from the subpanel part and I can't find a proper way to do it.

Here's the panel:

https://i.stack.imgur.com/hLoKn.png

You can notice that there is a white border that I want to eliminate (upon inspection, in the div.mat-expansion-panel-body part, there is a padding. When I set it to 0, it fixes and the white borders vanish. I tried however the following in my .css:

div.mat-expansion-panel-body {
  padding: 0 !important;
}

But it didn't work. If anyone's got a solution to fix that I'd be greatly appreciated.

Answer 1

Add the styles to your styles.css which is the global style, but this will affect all of the mat-expansions throughout your application.

div.mat-expansion-panel-body {
  padding: 0 !important;
}

The reason it's not working when you add it into the style of your components vs adding it in the global styles.css is that the styles are encapsulated and the mat-expansion-body is created outside the style of that component.

If you want to avoid that style appearing on every mat-expansion-panel-body you can create a class for example remove-mat-expansion-padding and give it to the mat-expansion-panel like this:

<mat-expansion-panel class="remove-mat-expansion-panel-padding">

And then in your styles.css

.remove-mat-expansion-panel-padding .mat-expansion-panel-content .mat-expansion-panel-body{
    padding: 0 !important;
}

So that the styles only apply on those mat-expansion-panel in which you add the class remove-mat-expansion-panel-padding instead of all the expansion panels throughout the app

Answer 2

The mat-expansion-panel-body is created internaly by Material.

Such as another Material components, to apply changes (mainly styles) to these components is very hard.

The alternative to solve this problem is remove the emulated encapsulation from your component, setting to ViewEncapsulation.None. But, with that, the styles applied into your component (css selectors, like classes, tags, ids, etc) are available for all components of your application.

To prevent encapsulation styles problems into your application, is a good idea apply an #id to your component container (in this case, the mat-expansion-panel), and work your component style inside this #id CSS selector, like the example:

<mat-expansion-panel id="my-component-name-style-container">
   <!-- your content -->
</mat-expansion-panel>
#my-component-name-style-container mat-expansion-panel-body {
   padding: 0;
}

The idea of apply a CSS #id selector with the component name is prevent that other components have the same style (more or less "encapsulated" into the #component-name style selector, which is available for all application components because the encapsulation is none).

I hope I've helped

READ ALSO
html/css/js - marquee, scroll one element then pause, then scroll again

html/css/js - marquee, scroll one element then pause, then scroll again

I am trying to create an overlay page for my twitch channelI play Rocket League and the tracker network site provides overlays that show your rank

71
My sticky positioned element isn&#39;t acting like it should

My sticky positioned element isn't acting like it should

Usually, I don't have any issues with the sticky position propertyHowever, I can't figure out why my div isn't behaving so

88
Passing integers to JSX attributes

Passing integers to JSX attributes

I want to pass rows=2 to this tagHowever, this results in the following error

97
Is this Possible to give String data type as Number in JavaScript

Is this Possible to give String data type as Number in JavaScript

Can i give string data type as Number For example

98