I am trying to elevate hovered row in mat-table so changing elevation to a <tr>
on hover but elevation that is shadow effect not showing at the bottom side of the row however showing for the top, left, and right sides of the row.
.html
<div class="mat-elevation-z2" #TABLE>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Required Columns... -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; let e = index; columns: columnsToDisplay;"
(mouseover)="onMouseOver(e)" [ngClass] = "{'mat-elevation-z24' : e == mouseOverIndex}"></tr>
</table>
</div>
.ts
mouseOverIndex = -1;
public onMouseOver(index) {
this.mouseOverIndex = index;
}
.css
.mat-row:hover {
cursor: pointer;
}
What am I missing here?
I tried to use 'z24', 'z16', 'z8' etc but no use.
To set the row height to a specific measurement, click a cell in the row that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Row Height box, and then specify the height you want. To use the ruler, select a cell in the table, and then drag the markers on the ruler.
looks like the background: inherit
on the row is overriding the drop shadow on the bottom.
adding the following to CSS will resolve this issue.
[mat-row].remove-background {
background: none ;
}
Then apply class to your row.
<tr mat-row class="remove-background" (mouseover)="onMouseOver(e)"
Stackblitz
https://stackblitz.com/edit/angular-ecrvzg?embed=1&file=app/table-basic-example.css
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With