Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change elvation of a row in mat-table

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.

like image 508
Ramesh Avatar asked Feb 11 '19 07:02

Ramesh


People also ask

How do you adjust row height in a table?

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.


1 Answers

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

like image 55
Marshal Avatar answered Oct 21 '22 16:10

Marshal