web-dev-qa-db-ja.com

Md-dialogフルスクリーンangle4を開く方法は？

Configを使用してプロパティ値を渡そうとしています。ただし、ダイアログは全画面表示されません。

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

解像度に基づいてダイアログを全画面表示するにはどうすればよいですか？

angularangular-material2mddialog
8
Shailesh Ladumor

panelClassをダイアログに追加してから、その特定のダイアログだけにcssを適用できます。

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
    panelClass: 'full-screen-modal',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

クラスの作成：

.full-screen-modal .mat-dialog-container {
  max-width: none;
}
6
Ketan Akbari

私のためのこの仕事

let dialogRef = this.dialog.open(CustomerGarageAddEditComponent, {
      maxWidth: '100vw',
      maxHeight: '100vh',
      height: '100%',
      width: '100%'
    });

ソース

https://github.com/angular/material2/issues/982

9
San Jaisy