Angular Material Dialog не отображает высоту maxHeight на мобильном устройстве - PullRequest
0 голосов
/ 28 февраля 2020

Я использую 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>
...

Кто-то знает, как исправить? Снимок экрана: enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...