Angular Flex: высота mat-dialog-content неверна при использовании fxLayoutGap с параметром grid - PullRequest
Новая
       3

Angular Flex: высота mat-dialog-content неверна при использовании fxLayoutGap с параметром grid

1 голос
/ 03 марта 2020

Когда я создаю модальное окно с содержимым, которое будет отображаться с помощью fxLayoutGap и опцией сетки, высота области содержимого диалогового окна вычисляется неправильно. Вместо расширения диалогового окна происходит переполнение.

Stackblitz: https://stackblitz.com/edit/angular-material-jror5h

Код модального компонента: 

  <mat-dialog-content class="mat-typography">
    <div fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="20px grid">
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 1</mat-label>
          <input matInput placeholder="FormControl 1" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="66.7">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 2</mat-label>
          <input matInput placeholder="FormControl 2" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 3</mat-label>
          <mat-select>
            <mat-option [value]="true">yes</mat-option>
            <mat-option [value]="false">no</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 4</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 4</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="50">
        <mat-form-field appearance="outline" style="width: 100%">
          <mat-label>FormControl 5</mat-label>
          <input matInput placeholder="FormControl 5" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="50">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 6</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
    </div>
  </mat-dialog-content>

Визуализированный модальный компонент: Rendered Modal Component Как можно решить проблему без указания фиксированной высоты для содержимого mat-dialog?

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Используйте директиву fxFlexFill для правильной высоты 

<div fxLayout="row wrap" fxFlexFill fxLayoutAlign="start start" fxLayoutGap="20px grid">
0 голосов
/ 03 марта 2020

вы можете установить высоту вашего модального окна перед его открытием из конфигурации диалога: 

openModal() {
    this.dialog.open(ModalComponent, {
      height: '400px'
    });
  }

Вы включаете mat-dialog-content внутри формы , это неправильный.

mat-dialog-content является родительским для вашего модального содержимого, и действия mat-dialog-actions могут использоваться в качестве нижнего колонтитула для этого

...