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>

Answer 1

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

Answer 2

I had a similar issue as well and I solved it by setting the background-color on mat-expansion-panel to be the same background-color as the rest of the content. In my case I set it to white .

The reason you couldn't inspect this in the devtools is because it's not a real border element yet it gets an appearance as one due to its similar sizing.

Answer 3

覆盖 mat-expansion-panel 显示属性，如：mat-expansion-panel style="display: unset;"