Я использую Angular Диалог материалов в моем приложении. У меня проблема при попытке применить maxHeight к модалу, который предполагает рендеринг в части экрана. Но у меня есть эта ошибка на моем мобильном дисплее - диалог принимает всю высоту страницы и не помещается внутри maxHeight.
Диалог 1. Crear Cliente
.TS
openNewClientForm() {
this.dialogCtrl = this.dialog.open(NewClientComponent, {
width: '80%',
maxHeight: '90vh',
panelClass: 'dialog-container-small',
disableClose: true,
autoFocus: false
})
this.dialogCtrl.backdropClick().subscribe( (res) => {
if(this.hasChangesDialog) {
this.hasChangesDialog = false
let confDialogCtrl = this.dialog.open(CloseConfirmModalComponent, {
autoFocus: false,
data: {mode: "close-mode"}
})
confDialogCtrl.afterClosed().subscribe( res => {
if(res) this.dialogCtrl.close()
})
} else this.dialogCtrl.close()
})
this.dialogCtrl.afterClosed().subscribe( res => this.initData())
}
. CSS
.dialog-container-small .mat-dialog-container {
padding: 0 !important;
border-radius: 15px;
max-height: 90vh;
}
Диалог 2. Crear Factura
.TS
makeFactura() {
this.dialogCtrlFactura = this.dialog.open(NewFacturaComponent, {
width: '90%',
minWidth: '90%',
height: '94vh',
data: {client: this.clientData},
panelClass: 'dialog-container',
disableClose: true,
autoFocus: false
})
this.dialogCtrlFactura.backdropClick().subscribe( (res) => {
if(this.hasChangesDialog) {
this.hasChangesDialog = false
let confDialogCtrl = this.dialog.open(CloseConfirmModalComponent, {
autoFocus: false,
data: {mode: "close-mode"}
})
confDialogCtrl.afterClosed().subscribe( res => {
if(res) this.dialogCtrlFactura.close()
})
} else this.dialogCtrlFactura.close()
})
this.dialogCtrlFactura.afterClosed().subscribe( res => this.initData())
}
. CSS
.dialog-container .mat-dialog-container {
padding: 0 !important;
}
header {
position: fixed;
top: 2.5vh;
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
height: 60px;
transition: padding 300ms ease;
box-shadow: 0px 1px 3px 0px rgb(146, 146, 146);
background-color: #fff;
z-index: 110;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-family: 'Montserrat', sans-serif !important;
}
. HTML
<header *ngIf="headerState" [@fadeInOnEnter]>
<div fxLayout='row' fxLayoutAlign="start center" fxFlexFill>
<div fxLayout='column' fxFlex="90%">
<div fxLayout='row' fxLayoutAlign="start center" >
<i class="fas fa-paste" style="margin-left: 3%; color: #34446E; font-size: 1.2em" cdkFocusInitial></i>
<span style="color: #34446E; padding-left: 2%; padding-top: 1px; min-width: 50%; font-size: 16pt; font-weight: 500; font-family: 'Montserrat', sans-serif !important;">Crear Factura</span>
</div>
</div>
<div fxLayout='column' fxLayoutAlign="end" fxFlex="10%" style="margin-right: 1%">
<div fxLayout='row' fxLayoutAlign="end center" style="text-align: center;">
<button mat-button matPrefix mat-icon-button style="outline: none;" (click)="closeModal()">
<i class="fas fa-times" style="color: #34446E;"></i>
</button>
</div>
</div>
</div>
</header>
<form id="mainForm" [formGroup]="facturaForm" (ngSubmit)="saveFactura(facturaForm)" novalidate autocomplete="off" style="margin-top: 60px;">
<div fxLayout='row' fxLayoutAlign="center" fxLayoutGap="50px" style="padding: 1% 6%">
<div fxLayout='column' fxLayoutAlign="end stretch" fxFlex="50%">
<mat-form-field style="width: 100%">
<input matInput type="number" placeholder="" formControlName="km_actual">
<mat-placeholder class="placeholder">KM Actual</mat-placeholder>
</mat-form-field>
...
Кто-то знает, как исправить? Снимок экрана: