问题
I am having 5 mat-tab and each tab is having a large amount of data so scroll is getting added to that window. Is there any way through which I can fix the header of mat-tab and let the content to be scroll able.
I tried putting position:fixed; and position:sticky inside
::ng-deep .mat-tab-label {
}
But it do not seems to solve the problem. my html
<div class="container">
<mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)">
<mat-tab matTooltip="Tooltip!" label="Pers info">
<table id="customers" *ngIf="customerData">
<caption>
<h4>Customer Information</h4>
</caption>
<tr *ngFor="let item of customerData">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<table id="customers" *ngIf="aadhaarAddress">
<caption>
<h4>Aadhaar Address</h4>
</caption>
<tr *ngFor="let item of aadhaarAddress">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<table id="customers" *ngIf="presentAddress">
<caption>
<h4>Present Address</h4>
</caption>
<tr *ngFor="let item of presentAddress">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<table id="customers" *ngIf="financialInfo">
<caption>
<h4>Financial Health Information</h4>
</caption>
<tr *ngFor="let item of financialInfo">
<td class="key">
{{item.key}}
</td>
<td class="value">{{item.value}}</td>
</tr>
</table>
<br>
</mat-tab>
<mat-tab label="Bureau A">
<table id="customers" *ngIf="bureauAnalysisData">
<caption>
<h4>Bureau Analysis Data</h4>
</caption>
<tr *ngFor="let item of bureauAnalysisData">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<table id="customers" *ngIf="bureauScoreReasons">
<caption>
<h4>Bureau Score Reasons</h4>
</caption>
<tr *ngFor="let item of bureauScoreReasons">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<table id="customers" *ngIf="bureauEMI">
<caption>
<h4>Total EMI in CIBIL</h4>
</caption>
<tr *ngFor="let item of bureauEMI">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<br>
</mat-tab>
<mat-tab label="Bureau E">
<table id="customers" *ngIf="enquiry1">
<caption>
<h4>Enquiries in last 30 days</h4>
</caption>
<tr>
<th class="hide"></th>
<th class="value hide">Number of enquiries</th>
<th class="value hide">Average amount</th>
</tr>
<tr *ngFor="let item of enquiry1">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="25%">{{item.value}} </td>
<td class="value" width="25%">{{item.value2}}</td>
</tr>
</table>
<br>
<table id="customers" *ngIf="enquiry2">
<caption>
<h4>Enquiries in last 31-90 days</h4>
</caption>
<tr>
<th class="hide"></th>
<th class="value hide">Number of enquiries</th>
<th class="value hide">Average amount</th>
</tr>
<tr *ngFor="let item of enquiry2">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="25%">{{item.value}}</td>
<td class="value" width="25%">{{item.value2}}</td>
</tr>
</table>
<br>
</mat-tab>
<mat-tab label="SMS">
<table id="customers" *ngIf="smsData">
<caption>
<h4>SMS Data Analysis</h4>
</caption>
<tr *ngFor="let item of smsData">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<table id="customers" *ngIf="salary">
<div *ngIf="salary.lenght>0">
<caption>
<h4>Salary</h4>
</caption>
<tr>
<th width="1%">S.No </th>
<th width="20%">SMS Date </th>
<th width="13%">Sender Name </th>
<th width="66">Original Message </th>
</tr>
<tr *ngFor="let item of salary;let i=index">
<td>
{{i+1}}
</td>
<td>{{item.smsDate}}</td>
<td>{{item.senderName}}</td>
<td>{{item.originalMessage}}</td>
</tr>
</div>
</table>
<table id="customers" *ngIf="balance">
<div *ngIf="balance.length>0">
<caption>
<h4>Insufficient, bounce, return, overdue</h4>
</caption>
<tr>
<th width="1%">S.No </th>
<th width="20%">SMS Date </th>
<th width="13%">Sender Name </th>
<th width="66">Original Message </th>
</tr>
<tr *ngFor="let item of balance;let i=index">
<td>
{{i+1}}
</td>
<td>{{item.smsDate}}</td>
<td>{{item.senderName}}</td>
<td>{{item.originalMessage}}</td>
</tr>
</div>
</table>
<table id="customers" *ngIf="nach">
<div *ngIf="nach.length>0">
<caption>
<h4>EMI, ECS & NACH</h4>
</caption>
<tr>
<th width="1%">S.No </th>
<th width="20%">SMS Date </th>
<th width="13%">Sender Name </th>
<th width="66">Original Message </th>
</tr>
<tr *ngFor="let item of nach;let i=index">
<td>
{{i+1}}
</td>
<td>{{item.smsDate}}</td>
<td>{{item.senderName}}</td>
<td>{{item.originalMessage}}</td>
</tr>
</div>
</table>
<table id="customers" *ngIf="bureau">
<div *ngIf="bureau.length>0">
<caption>
<h4>Bureau</h4>
</caption>
<tr>
<th width="1%">S.No </th>
<th width="20%">SMS Date </th>
<th width="13%">Sender Name </th>
<th width="66">Original Message </th>
</tr>
<tr *ngFor="let item of bureau;let i=index">
<td>
{{i+1}}
</td>
<td>{{item.smsDate}}</td>
<td>{{item.senderName}}</td>
<td>{{item.originalMessage}}</td>
</tr>
</div>
</table>
<table id="customers" *ngIf="companySalary">
<div *ngIf="companySalary.length>0">
<caption>
<h4>Company Salary</h4>
</caption>
<tr>
<th width="1%">S.No </th>
<th width="20%">SMS Date </th>
<th width="13%">Sender Name </th>
<th width="66">Original Message </th>
</tr>
<tr *ngFor="let item of companySalary;let i=index">
<td>
{{i+1}}
</td>
<td>{{item.smsDate}}</td>
<td>{{item.senderName}}</td>
<td>{{item.originalMessage}}</td>
</tr>
</div>
</table>
<table id="customers" *ngIf="loan">
<div *ngIf="loan.length>0">
<caption>
<h4>Loan</h4>
</caption>
<tr>
<th width="1%">S.No </th>
<th width="20%">SMS Date </th>
<th width="13%">Sender Name </th>
<th width="66">Original Message </th>
</tr>
<tr *ngFor="let item of loan;let i=index">
<td>{{i+1}}</td>
<td>{{item.smsDate}}</td>
<td>{{item.senderName}}</td>
<td>{{item.originalMessage}}</td>
</tr>
</div>
</table>
<table id="customers" *ngIf="score">
<div *ngIf="score.length>0">
<caption>
<h4>Score</h4>
</caption>
<tr>
<th width="1%">S.No </th>
<th width="20%">SMS Date </th>
<th width="13%">Sender Name </th>
<th width="66">Original Message </th>
</tr>
<tr *ngFor="let item of score;let i=index">
<td>{{i+1}}</td>
<td>{{item.smsDate}}</td>
<td>{{item.senderName}}</td>
<td>{{item.originalMessage}}</td>
</tr>
</div>
</table>
<table id="customers" *ngIf="allSMSData">
<div *ngIf="allSMSData.length>0">
<caption>
<h4>All SMS</h4>
</caption>
<tr>
<th width="1%">S.No </th>
<th width="20%">SMS Date </th>
<th width="13%">Sender Name </th>
<th width="66">Original Message </th>
</tr>
<tr *ngFor="let item of allSMSData;let i=index">
<td >{{i+1}}</td>
<td >{{item.smsDate}}</td>
<td>{{item.senderName}}</td>
<td >{{item.originalMessage}}</td>
</tr>
</div>
</table>
<br>
</mat-tab>
<mat-tab label="Device">
<table id="customers" *ngIf="deviceData">
<caption>
<h4>Device Data</h4>
</caption>
<tr *ngFor="let item of deviceData">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<table id="customers" *ngIf="wifiConnectionInfo">
<caption *ngIf="wifiConnectionInfo.length>0">
<h4>Wi-Fi Connections Information</h4>
</caption>
<tr *ngIf="wifiConnectionInfo.length>0">
<th style="padding-left: 75px ">Wi-Fi Name</th>
<th style="padding-left: 75px; ">No. of times connected in the last 7 days</th>
</tr>
<tr *ngFor="let item of wifiConnectionInfo">
<td class="key" width="50%">
{{item.key}}
</td>
<td class="value" width="50%">{{item.value}}</td>
</tr>
</table>
<br>
<table id="customers" *ngIf="accountInfo">
<caption *ngIf="accountInfo.length>0">
<h4>Account Information</h4>
</caption>
<tr>
<th style="padding-left: 75px">Email</th>
<th style="padding-left: 75px;">Vendor</th>
</tr>
<tr *ngFor="let item of accountInfo">
<td class="key" width="50%">
{{item.email}}
</td>
<td class="value" width="50%">{{item.vendor}}</td>
</tr>
</table>
<br>
</mat-tab>
<mat-tab label="Json">
<mat-card>
<app-ngx-json-viewer [json]="bureauJSON"></app-ngx-json-viewer>
</mat-card>
</mat-tab>
</mat-tab-group>
</div>
css
mat-grid-tile {
background: lightgrey;
}
h4 {
color: grey;
text-align: center;
}
.key {
padding-left: 75px !important;
font-weight: bold;
color: gray;
}
.not-available {
margin-top: 15%;
text-align: center;
font-size: 14px;
}
.mat-tab-body-content {
height: 100%;
}
.value {
padding-left: 75px !important;
color: gray;
}
::ng-deep .mat-tab-labels {
justify-content: center;
padding: 0px 7px !important;
font-size: 10px !important;
}
::ng-deep .mat-tab-label {
justify-content: center;
padding: 0px 7px !important;
font-size: 12px !important;
min-width: 85px !important;
}
.hide {
border: none !important;
}
#customers {
padding:0;
margin:0;
font-family: 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 500;
width: 100%;
border-collapse: collapse;
}
td {
color: #808080;
}
.container {
overflow-y: auto;
}
#customers td,
#customers th {
border: 1px solid #ddd;
padding: 2px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers th {
color: gray;
text-align: left;
border-collapse: collapse;
}
回答1:
Solved it using
::ng-deep .mat-tab-body-wrapper {
height: 75vh; //required height
}
回答2:
Solved it using position: fixed !important; inside
:host ::ng-deep .mat-tab-header {
}
But then the tab was not clickable so added z-index:100000; and then it starts working.
来源：https://stackoverflow.com/questions/48517730/how-to-fix-the-header-of-mat-tab