web-dev-qa-db-ja.com

Angular 5 /材料、マットダイアログで垂直スクロールを削除する方法？

マテリアルダイアログの垂直スクロールを削除しようとしています。

CSSで試していました

.mat-dialog-container /deep/ {
   overflow-y: hidden;
}

親コンポーネントのコードも

this.dialog._overlayContainer._containerElement.style.overflowY = "hidden";

しかし、それを行う方法はありませんでした。

それを達成する方法を誰かが知っていますか？

ありがとう

typescriptangular5angular-material2
9
ackuser

Styles.scssファイルに移動して、以下を追加します。

.custom-dialog-container .mat-dialog-container {
  overflow-y: hidden;
}

そして追加

panelClass: 'custom-dialog-container'

dialogComponentに送信するMatDialogRefオブジェクトの一部として

5
Ritiwik Brahma

ダイアログコンポーネントのスタイルで：

/deep/ .mat-dialog-content {
    overflow-y: hidden !important;
}
5
G. Tranter

ダイアログコンポーネントのスタイルの中で、あなたは使うことができます

  ::ng-deep .mat-dialog-container {
    overflow-y: hidden !important;
}
1
sadab khan

ダイアログがページ全体に広がり、右側のスクロールバーが消えない場合は、このオプションをお勧めします。

.cdk-global-scrollblock {
    overflow-y: hidden;
}

それでうまくいきました。

1
DerKarim

次のようにscrollStrategyを使用できます。

let dialogRef = this.dialog.open(ConfirmDialog, {
          scrollStrategy: this.overlay.scrollStrategies.noop(),
          width: '250px',
          data: { id : val.id }
        });
1
Tushar

これは私の道具です。 TrendDialogComponentの親コンポーネント

const dialogRef = this.trendDialog.open(TrendDialogComponent, {
                    autoFocus: false,
                    panelClass: 'trend-dialog',
                    width: '1360px', height: '680px',
                    data: {tagsTrend: this.tagNames}
                  });

そして、このcssをstyle.cssに追加します

.trend-dialog .mat-dialog-container{
    overflow-y: hidden !important;
}
0
Hien Nguyen