mat-expansion-panel remove border

Question

I have a mat-data-table with mat-expansion-panel as a column. For some reason on some rows the mat-expansion-panel has a border around it, how do I get rid of that. When the user hovers the mouse the expansion panel expands and when the mouse leaves it collapses. The data that those rows have, they are just as same as the ones without borders. Here in this picture its the notes column that has the mat-expansion-panel inside the mat cell.

 <mat-cell *matCellDef="let workOrder">
                    <mat-expansion-panel class="" _ngcontent-c0="" ng-reflect-hide-toggle="true" #panel *ngIf="workOrder.notes !== ''" hideToggle="true"
                        (mouseenter)="panel.open()" (mouseleave)="panel.close()">
                        <mat-expansion-panel-header>
                            <mat-panel-title style="justify-content: center">
                                <mat-icon style="color:#8fbbdf;">notes</mat-icon>
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <mat-panel-description>
                            {{ workOrder.notes }}
                        </mat-panel-description>
                    </mat-expansion-panel>
                </mat-cell>

i can't inspect which inheritance is giving this border to your math-expansion-panel. Simply inspect it and apply the same css selector with border:none; at the bottom of your css file (that should be loaded after the one that is causing the border). — JoelBonetR
@JoelBonetR I tried that it didn't work. If there is a border setting there it should apply to every row where there is a note, but this happens only to a few of them. — Sumchans
Select only notes so to apply CSS... Need a working code to help — JoelBonetR
Thanks @JoelBonetR I am not sure what happened, right now I dont see a border, will get back to if the issue returns. — Sumchans
@JoelBonetR, the same issue is back. I tried .mat-expansion-panel-header { border:none; }, it didn't work. I have updated my original post with a pic that is from the Chromes inspector. — Sumchans

JoelBonetR JoelBonetR · Accepted Answer · 2018-05-26T14:35:50

The issue seems to be on mat-expansion-panel tag. If i remove all classes of it, the border disappear so it might be an "issue" on some class of it or with the combination of more than one. i changed from:

<mat-expansion-panel _ngcontent-c0="" class="mat-expansion-panel ng-tns-c3-1 ng-star-inserted" hidetoggle="true" ng-reflect-hide-toggle="true">

to:

<mat-expansion-panel _ngcontent-c0="" class="" hidetoggle="true" ng-reflect-hide-toggle="true">

on the first element and this is the result (the desired one, i think):

Working fine when expanded too: Hope it helps you

mat-expansion-panel remove border

3 Answers