Within my application, I have five mat-tabs each containing a large amount of data which requires scrolling. Is there a way to fix the header of the tab while allowing the content to scroll?
I attempted adding position:fixed; and position:sticky within:
::ng-deep .mat-tab-label {
}
However, this did not resolve the issue.
My HTML:
<div class="container">
<mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)">
...
)
</table>
...
...
</div>
CSS: