We are using cdk-virtual-scroll-content with the angular material table. we have made the table header sticky. The issue we are seeing is the table data is overflowing above the sticky header. We figured what’s causing the issue. Tha transform:translate of cdk-virtual-scroll-content-wrapper and the top value of the column header is 5px apart which is causing that 5px gap of data overflow. could anyone please suggest how to solve this without using JS and DOM traversal.
<code> <cdk-virtual-scroll-viewport #viewport tvsItemSize style="width:100%;height:520px">
<table mat-table
matSort>
<ng-container matColumnDef="first_name">
<th #podHeader class="pod-header" mat-header-cell *matHeaderCellDef> NAME</th>
<td class="table-header-field-cell table-data-border-right cell-container" mat-cell *matCellDef="let element">
</ng-container>
</table>
</cdk-virtual-scroll-viewport>
</code>
<code> <cdk-virtual-scroll-viewport #viewport tvsItemSize style="width:100%;height:520px">
<table mat-table
matSort>
<ng-container matColumnDef="first_name">
<th #podHeader class="pod-header" mat-header-cell *matHeaderCellDef> NAME</th>
<td class="table-header-field-cell table-data-border-right cell-container" mat-cell *matCellDef="let element">
</ng-container>
</table>
</cdk-virtual-scroll-viewport>
</code>
<cdk-virtual-scroll-viewport #viewport tvsItemSize style="width:100%;height:520px">
<table mat-table
matSort>
<ng-container matColumnDef="first_name">
<th #podHeader class="pod-header" mat-header-cell *matHeaderCellDef> NAME</th>
<td class="table-header-field-cell table-data-border-right cell-container" mat-cell *matCellDef="let element">
</ng-container>
</table>
</cdk-virtual-scroll-viewport>
we tried to update the transform translate manually using DOM traversal and JS functions but it is causing a performance overhead.
New contributor
Rohini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.