mat-dialog not show inside mat-grid

this json-form in angular I wrote it to make a grid list and put some dialog in it but the dialog displaying depends on rowHeight

import {Component, Input, OnInit} from '@angular/core';
import {WidgetTypeModel} from '../../config/widget-type.model';
import {FormControl, Validators} from '@angular/forms';
import {AppContainerModel} from '../model/app-container.model';
import {BreakpointObserver} from '@angular/cdk/layout';

@Component({
  selector: 'app-json-form',
  template: `
    <ng-container *ngFor="let widget of containerList">
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.offCanvas.name">
        <app-off-canvas [data]="widget.container"
                        data-kt-drawer-close="#kt_drawer_example_basic_close"
                        data-kt-drawer-toggle="#kt_drawer_example_basic_button">
        </app-off-canvas>
      </ng-container>
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.crud.name">
        <app-crud-template [data]="widget.container"></app-crud-template>
      </ng-container>
    </ng-container>
    <div class="table-responsive">
      <table class="table table-rounded">
        <mat-grid-list gutterSize="15px" cols="12" [rowHeight]="rowHeight">
          <ng-container *ngFor="let widget of containerList">
            <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.form.name">
              <app-form-widget [data]="widget.container"></app-form-widget>
            </ng-container>
            <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.table.name">
              <mat-grid-tile [colspan]="widget.cols ? widget.cols : 12"
                             [rowspan]="widget.rows ? widget.rows : 6">
                <mat-grid-list gutterSize="0" cols="12">
                  <app-table-widget [data]="widget.container"></app-table-widget>
                </mat-grid-list>
              </mat-grid-tile>
            </ng-container>
            <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.tab.name">
              <mat-grid-tile [colspan]="widget.cols ? widget.cols : 12"
                             [rowspan]="widget.rows ? widget.rows : 6">
                <mat-grid-list cols="12">
                  <app-tab-widget [data]="widget.container"></app-tab-widget>
                </mat-grid-list>
              </mat-grid-tile>
            </ng-container>
            <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.tree.name">
              <mat-grid-tile [colspan]="widget.cols ? widget.cols : 12"
                             [rowspan]="widget.rows ? widget.rows : 6">
                <mat-grid-list cols="12">
                  <app-tree-widget [data]="widget.container"></app-tree-widget>
                </mat-grid-list>
              </mat-grid-tile>
            </ng-container>
          </ng-container>
        </mat-grid-list>
      </table>
    </div>
  `,
  styleUrls: ['./app-json-form.component.scss']
})
export class AppJsonFormComponent implements OnInit {
  widgetTypeEnum = new WidgetTypeModel()
  responsive = true;
  @Input() containerList: AppContainerModel[];
  rowHeight: any;

  constructor(private breakpointObserver: BreakpointObserver) {
    if (this.containerList && this.containerList.length > 0) {
      this.makeGroup();
    }
  }

  ngOnInit() {
    this.detectBreakpoint();
  }

  makeGroup() {
    this.containerList[0].container.formControl.forEach((f: any) => {
      // @ts-ignore
      this.containerList[0].container.formGroup.addControl(f.name, new FormControl('', Validators.compose(f.validators)));
    });
  }

  getBooleanCallBackFunction(func: any, element?: any): boolean {
    if (func && typeof func === 'boolean') {
      return func;
    } else if (func) {
      return func(element);
    } else {
      return false;
    }
  }

  private detectBreakpoint(): void {
    this.breakpointObserver.observe(['(max-width: 500px)']).subscribe(result => {
      this.rowHeight = '3:4';
    });
  }
}

input

dialog that display incorrectly