CODEWITHSUNDEEP
angularmaterial-designangular-material
Adrien
Adrien

Reputation: 2934

Expansion-panel from material angular 4

I hava an angular 4.4.4 application with material 2.0.0-beta.12 and I want to use the mat-expansion-panel from material design.

This is my code :

           <mat-expansion-panel class="parametersPanel">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            PARAMETERS
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <table style="width:100%">
                        <tbody>
                            <tr class="parameterListItem">
                                <td class="icon"><img src="assets/images/alert.png"></td>
                                <td class="parameterName">Parameter 1</td>
                                <td class="parameterValue">Value</td>
                                <td class="unit">unit</td>
                            </tr>                        
                        </tbody>
                    </table>
            </mat-expansion-panel>

So it works well but it possible to remove the margin in the mat-expansion-panel-body which has, from the browser margin: 0 24px 16px; ?

Upvotes: 21

Views: 50043

Answers (11)

kawthar
kawthar

Reputation: 119

this one worked for me

::ng-deep .mat-expansion-panel-body {
    padding: 0px 0px 0px 0px; 
}

I hope that will work for you

Upvotes: 11

Vinicius
Vinicius

Reputation: 1

This code helped me.

.mat-expansion-panel-header {
   padding: 0px 16px;
}

Upvotes: 0

Lorka
Lorka

Reputation: 69

The easiest and safest way to do it is to include this in your project global style.scss

app-instruction mat-expansion-panel.trigger-panel {
.mat-expansion-panel-body {
    padding:0;
}

}

  • app-instruction => your component selector in the component.ts file.
  • mat-expansion-panel => selector for mat-expansion-panel.
  • .trigger-panel => is a css class I included on the mat-expansion-panel to select only this one in the component.html file.

enter image description here

Upvotes: 0

Mansour Alnasser
Mansour Alnasser

Reputation: 5030

for @angular/material version +10

You need to add encapsulation: ViewEncapsulation.None property into your @Component decorator

@Component({
  selector: '...',
  ...
  encapsulation: ViewEncapsulation.None
})
export class myApp{}

Then this will work

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

Note that ::ng-deep and /deep/ will not work on the new version of angular/material as @nicholaschris says

Upvotes: -2

Pratik Sharma
Pratik Sharma

Reputation: 1

This code below will work when added to your components css file

:host {
  ::ng-deep {
    .mat-expansion-panel-spacing {
      margin: 0px 0 !important;
    }
  }
}

Upvotes: 0

Oscar J. Hernandez C.
Oscar J. Hernandez C.

Reputation: 91

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

Upvotes: 9

Sebastian Castaldi
Sebastian Castaldi

Reputation: 9004

if you add it to the main styles.scss it works (not at the component style level)

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

Upvotes: 3

nicholaschris
nicholaschris

Reputation: 1401

In your style.css or your components style you need to add the following css:

/deep/ .parametersPanel .mat-expansion-panel-body {
    padding: 0;
}

This is due to view encapsulation. You can read more about this here: https://angular.io/guide/component-styles

Update:

The use of /deep/, ::ng-deep to modify the styles of material components has been deprecated. See this link.

However, using @angular/core ^6.1.0 and @angular/material ^6.4.6 I was able to change the style of Angular Material's Expansion panel without having to add anything specific. It seems like you can now simply change the style in your components css file. So this should work:

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

You can read here for more information about the deprecation of /deep/, ::ng-deep here.

Upvotes: 20

George C.
George C.

Reputation: 331

This works 100%.

Add this inside your style.css:

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

Upvotes: 20

zName
zName

Reputation: 1

You can easily remove parent padding. 

<div class="removePadding">
   <mat-list-item *ngFor="let item of item.children" class="testingSmall">
      <h3 matLine>{{item.label}}</h3>
   </mat-list-item>
</div>

.removePadding{
   margin: 0 -24px -16px;
}

Upvotes: -4

user8836607
user8836607

Reputation: 221

Instead of /deep/ you should use ::ng-deep, which is an alias provided by angular. Support for /deep/ etc. is already removed from chrome browser. So in your example that would be:

::ng-deep .parametersPanel .mat-expansion-panel-body {
    padding: 0;
}

Upvotes: 22

Related Questions