Angular 4 expansion panel

Question

I am hava angular 4.4.4 application material 2.0.0-beta.12and I want to use a mat-expansion-panelmaterial construction .

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 can I remove the token in mat-expansion-panel-body, which has, from the browser margin: 0 24px 16px;?

Answer 1

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

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

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

Answer 2

/deep/ ::ng-deep, , angular. /deep/ .. Chrome. , :

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

Answer 3

You can easily remove the parent addition.

<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;
}

Answer 4

this one worked for me

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

}

I hope this works for you.