I am working with a column named project in angular material, and underneath the title are some checkboxes.
However, when you scroll down in the table, the column header name also scrolls instead of staying in place.
Here is the HTML code:
<ng-container matColumnDef="projects">
<th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
<div class="mat-checkbox-project">
<div class="row" *ngFor="let item of returnProjectCodes; let i = index">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="filterProjects($event, i, item); selected=i"
[checked]="selected === i"
>{{ item.name }}
</mat-checkbox>
</div>
</div>
<div class="mat-sort-header-button-project">Project</div>
</th>
<td mat-cell *matCellDef="let row">{{ row.projects }}</td>
</ng-container>
And here is the crucial CSS code:
.mat-sort-header-button-project {
//position: relative;
position: fixed;
}
I have used position: fixed to align the column header name with the checkboxes below it. However, now the issue is that the column header title "project" will scroll along with the table content instead of remaining fixed in its position.
How can I make sure that it stays in place as well?
Thank you!