【发布时间】：2020-09-02 08:14:52
【问题描述】：
您好，我正在使用两个动态材质网格列表，但是当尝试放置它们时，第二个 mat-gird-list 会在网格列表中增加时与第一个 mat-gird-list 重叠。
下面是css代码，
.my-grid-list-first {
padding-bottom: calc( 1 * ((15.3333% - 0.666667px) * 1) + 0px + 0px) !important;
}
.my-grid-tile-first {
width: calc((20% - 0.75px) * 1 + 0px) !important;
padding-top: calc((4.3333% - 0.666667px) * 1 + 0px) !important;
}
.my-grid-list-second {
padding-bottom: calc( 1 * ((15.3333% - 0.666667px) * 1) + 0px + 0px) !important;
}
.my-grid-tile-second {
width: calc((20% - 0.75px) * 1 + 0px) !important;
padding-top: calc((4.3333% - 0.666667px) * 1 + 0px) !important;
}
<!-- begin snippet: js hide: false console: true babel: false --><div class="container pt-24">
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
<div class="row mb-3 " *ngFor="let detailData of dataSource">
<div class="col-12">
<mat-card>
<div class="row">
<div class="col-sm-8 font-weight-bold" style="margin-bottom: 30px; font-size: 16px;">
{{ "ONBOARD_CUST_LABEL_CUSTOMER_INFO_SUMMARY" | translate }}
</div>
</div>
<div class="row" style="margin-bottom: 30px;">
<div class="col-sm-4">
<label class="heading">{{'ONBOARD_CUST_LABEL_DILIGENT_APPLICATION_ID' | translate}}:</label
>
<span class="sub-data">{{detailData.applicationId}}</span>
</div>
<div class="col-sm-4">
<label class="heading">
{{
"ONBOARD_CUST_LABEL_ONBOARDING_DATE"
| translate
}}:</label
>
<span class="sub-data">{{detailData.dateInitiated}}</span>
</div>
<div class="col-sm-4">
<label class="heading">
{{
"ONBOARD_CUST_LABEL_NEXT_REVIEW_DATE"
| translate
}}:</label
>
<span class="sub-data">{{detailData.nextReviewDate}}</span>
</div>
</div>
<div class="row" >
<div class="col-md-5">
<mat-grid-list cols="3" rowHeight="3:1">
<mat-grid-tile
*ngFor="let tile of customerDetails"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.background"
[style.color]="tile.color"
[ngStyle]="{'font-size': tile.size + 'px'}"
>
<ng-container *ngIf="tile.type === 'text' else other">
{{ tile.text | translate}}
</ng-container>
<ng-template #other >
{{
tile.text?.localeData
| localeLabel: (localeId$ | async)
}}
</ng-template>
</mat-grid-tile>
</mat-grid-list>
</div>
<div class="col-md-7">
<mat-grid-list cols="6" rowHeight="2:1">
<mat-grid-tile
*ngFor="let tile of relationshipDetails"
[colspan]="tile.cols "
[rowspan]="tile.rows"
[style.background]="tile.background"
[style.color]="tile.color"
[ngStyle]="{'font-size': tile.size + 'px'}"
>
<ng-container *ngIf="tile.type === 'text' else other">
{{
tile.text | translate
}}
</ng-container>
<ng-template #other >
<ng-container *ngIf="tile.type === 'object' else otherData">
{{
tile.text?.localeData
| localeLabel: (localeId$ | async)
}}
</ng-container>
<ng-template #otherData >
<ng-container *ngFor="let book of tile.text">
{{
book?.localeData
| localeLabel: (localeId$ | async)
}},
</ng-container>
</ng-template>
</ng-template>
</mat-grid-tile>
</mat-grid-list>
</div>
</div>
<div class="row" >
<div
class="col-sm-8 font-weight-bold"
style="
margin-bottom: 30px;
margin-top: 30px;
font-size: 16px;
"
>
{{
"ONBOARD_CUST_LABEL_RISK_ASSESSMENT_SUMMARY"
| translate
}}
</div>
</div>
<div class="row mb-3" >
<div class="col-md-12" *ngIf="dueList.length">
<mat-grid-list [cols]="4" rowHeight="4:1" class="my-grid-list-first">
<mat-grid-tile
class="my-grid-tile-first"
*ngFor="let tile of dueList"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.background"
[style.color]="tile.color"
[ngStyle]="{'font-size': tile.size + 'px'}"
>
{{
tile.text?.localeData
| localeLabel: (localeId$ | async)
}} {{'LABEL_RISK' | translate}}
</mat-grid-tile>
</mat-grid-list>
<br>
</div>
<!-- </div> -->
<!-- <div class="row mb-3" > -->
<div class="col-md-12" *ngIf="riskList.length">
<mat-grid-list [cols]="4" rowHeight="4:1" class="my-grid-list-second">
<mat-grid-tile
class="my-grid-tile-second"
*ngFor="let tile of riskList"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.background"
[style.color]="tile.color"
[ngStyle]="{'font-size': tile.size + 'px'}"
>
{{
tile.text?.localeData
| localeLabel: (localeId$ | async)
}} Risk
</mat-grid-tile>
</mat-grid-list>
</div>
</div>
<div class="row" >
<div class="col-sm-12">
<label class="heading"
>{{
"ONBOARD_CUST_LABEL_WAIVER_APPLIED"
| translate
}}:</label
>
<span style="margin-left: 10px;">
<mat-slide-toggle (click)="waiverAppliedToggle()"
formControlName="waiverApplied"
></mat-slide-toggle>
</span>
<span
class="sub-data"
*ngIf="formGroup.value.waiverApplied"
>
{{ "ONBOARD_CUST_LABEL_YES" | translate }}</span
>
<span
class="sub-data"
*ngIf="!formGroup.value.waiverApplied"
>
{{ "ONBOARD_CUST_LABEL_NO" | translate }}</span
>
</div>
<div
class="col-md-12"
*ngIf="formGroup.value.waiverApplied"
>
<mat-form-field class="example-full-width">
<mat-label>{{'ONBOARD_CUST_LABEL_COMMENTS'}}</mat-label>
<textarea formControlName="waiverComment" maxlength="3000"
matInput
placeholder=""
></textarea>
</mat-form-field>
</div>
</div>
</mat-card>
</div>
</div>
<div class="row mb-3 pt-24">
<div class="col-12">
<div class="d-flex justify-content-end">
<div class="mr-2 flex-grow-1">
</div>
<div *ngIf="formGroup.value.waiverApplied" class="mr-2">
<button mat-raised-button class="custom-primary-button" [disabled]="!formGroup.valid" type="submit">
{{ "ONBOARD_CUST_BUTTON_SAVE" | translate }}
</button>
</div>
<div *ngIf="showCancle">
<button routerLink="/queue-config" mat-raised-button class="custom-primary-button">
{{ "ONBOARD_CUST_BUTTON_CANCEL" | translate }}
</button>
</div>
</div>
</div>
</div>
</form>
</div>这里是代码链接：
https://stackblitz.com/edit/angular-jwh7ja?file=src%2Fapp%2Fapp.component.css
下面是重叠的图像：
绿色与红色和黄色重叠，div 行应该随着列表的增加而增加，
多次尝试后无法解决问题。
这是预期的 o/p
【问题讨论】：
标签： javascript html css angular