Angular Flex: The height of mat-dialog-content is not correct when using fxLayoutGap with grid option

user_12331146 0
Viewed 2729

When I create a modal window with a content to be displayed with fxLayoutGap and the grid option, the height of the content area of the dialog is not calculated correctly. Instead of enlarging the dialog box, an overflow occurs.

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

Code of the Modal Component:

  <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>

The rendered Modal Component: Rendered Modal Component How can the problem be solved without specifying a fixed height for mat-dialog-content?

angular-flex-layout angular-material angular
3 Answers

Use fxFlexFill directive for correct height

<div fxLayout="row wrap" fxFlexFill fxLayoutAlign="start start" fxLayoutGap="20px grid">
user_63492360
user_36883730

you can set height of your modal before opening it from dialog configuration:

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

You include mat-dialog-content inside form, this is wrong.

mat-dialog-content is parent for your modal content and mat-dialog-actions can be used as a footer for this

user_92755680
Related