[英]Component inside Mat-tab: How to scroll inner component
I'm working on a small attendance project and have some table component within some mat-tab components. 我正在做一个小型的出勤项目,并且在mat-tab组件中有一些表组件。 When there is overflow from the table, it scrolls the full component, I only want it to scroll the table on the inner component.
当表中有溢出时,它将滚动整个组件,我只希望它在内部组件上滚动表。
I have tried adding "overflow: auto" in these sections: 我尝试在以下部分中添加“溢出:自动”:
This is the outer component with tabs: 这是带有标签的外部组件:
<ng-container>
<mat-form-field class="date">
<input
matInput
[matDatepicker]="picker"
placeholder="Select a Date"
(dateInput)="addEvent($event)"
[(ngModel)]="currentDate"
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</ng-container>
<mat-tab-group>
<ng-container *ngFor="let grade of result; let i = index">
<mat-tab *ngIf="grade.length > 0" [label]="grades[i]">
<app-attendance-table [dataSource]="grade"></app-attendance-table>
</mat-tab>
</ng-container>
</mat-tab-group>
<div *ngIf="this.result.length < 1 && !this.loading">
No Records Found for The Date: {{ currentDate.toDateString() }}
</div>
<mat-spinner *ngIf="this.loading"> </mat-spinner>
</div>
This is the actual table component itself: 这是实际的表组件本身:
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Student Name </mat-header-cell>
<mat-cell *matCellDef="let student"
><span
[ngClass]="{
absent: student.isAbsent() && !student.Reason,
finished: student.isAbsent() && student.Reason && !student.editing
}"
>
{{ student.Name }}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="grade">
<mat-header-cell *matHeaderCellDef> Student Grade </mat-header-cell>
<mat-cell
[ngClass]="{
absent: student.isAbsent() && !student.Reason,
finished: student.isAbsent() && student.Reason && !student.editing
}"
*matCellDef="let student"
>
{{ student.Grade }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell
[ngClass]="{
absent: student.isAbsent() && !student.Reason,
finished: student.isAbsent() && student.Reason && !student.editing
}"
*matCellDef="let student"
>
{{ student.Status }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="reason">
<mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>
<mat-cell *matCellDef="let student">
<mat-form-field
class="reasons"
*ngIf="!student.isPresent()"
appearance="outline"
>
<mat-select
[(ngModel)]="student.Reason"
[disabled]="!student.editing"
placeholder="Select Reason"
(selectionChange)="makeChange(student)"
>
<mat-option
*ngFor="let reason of reasons; let i = index"
[value]="reason"
[disabled]="student.Reason === reason"
>
{{ reason }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="comments">
<mat-header-cell *matHeaderCellDef> Comments </mat-header-cell>
<mat-cell *matCellDef="let student">
<mat-form-field *ngIf="!student.isPresent()">
<input
matInput
[(ngModel)]="student.Comments"
[disabled]="!student.editing"
(input)="makeChange(student)"
/>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="edit">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let student">
<button
*ngIf="!student.isPresent() && !student.editing"
mat-raised-button
color="primary"
(click)="startEditing(student)"
>
Edit
</button>
<button
*ngIf="!student.isPresent() && student.editing"
mat-raised-button
color="warn"
(click)="saveEdits(student)"
>
Finish
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</div>
To make sure the table is scrollable, wrap the table inside div
with a fixed height and make its overflow: auto
. 为确保表格可滚动,请将表格以固定的高度包装在
div
,并使其overflow: auto
。
You can also check below links that has both page as well as table as scrollable. 您还可以检查下面的链接,这些链接同时具有页面和表格以及可滚动的内容。
To extend on @Pankaj Prakash's answer, you should set the overflow property on your outer container to overflow: hidden
. 要扩展@Pankaj Prakash的答案,您应该在外部容器上将overflow属性设置为
overflow: hidden
。
Then wrap a div
around the mat cells and set the property to overflow: scroll
. 然后将
div
包裹在mat单元格周围,并将属性设置为overflow: scroll
。 If you only want a vertical scroll you could also set the following property instead: overflow-y: scroll
如果只希望垂直滚动,则还可以设置以下属性:
overflow-y: scroll
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.