私は以前このことについてissueを提出し、多分私はちょうどので、ここで、何かが足りないのですが、私の問題である：PrimeNGモーダルP-ダイアログスクロールできません
Iは、画面あふれデータテーブルを持って、私は、項目を選択し、そこからモーダルダイアログとしてポップアップ表示されます。残念ながら、スクロールしてp-dialogで作業することはできません。
Doing <p-dialog [style]="{'margin':'80px', 'overflow':'scroll'}">は何らかの理由でモーダルダイアログに水平スクロールを作成するだけです。
さらに悪いことに、スクロールはまだ静的にしたいバックグラウンドで動作します。
p-dialogにスクロール（縦も！）を作成してフォーカスを合わせると、同時に背景のスクロールが無効になりますか？
も参照してくださいplunker：http://plnkr.co/edit/6H0Q2Cm0184pLw3bto1h?p=preview
あなたは、以下のようulタグのp-dialogとしないようにスクロール適用されるべきである、
p-dialog .ui-dialog {
overflow: scroll;
max-height: 70%;
}
理由：p-dialogはクラスと別のdivが含まれているdiv要素が含まれていますデフォルトのオーバーフロープロパティがautoのui-dialog-contentです。したがって、それを上書きするには、ルートレベルで設定する必要があります。以下のプランナーに従ってください。
注：
使用%スクロールバーが
を表示され、それを超えるモーダルの最大の高さを設定するmax-heightプロパティを使用しても応答性
をpreseveします背景を非表示にするには、以下のように使用する必要があります。
<div [class.hide]="showDialog">
<p-dataTable [paginator]="false" [value]="data">
<p-column header="Data">
<ng-template pTemplate="body" let-rowData="rowData">{{rowData}}</ng-template>
</p-column>
</p-dataTable>
</div>
あなたが最小高さおよび最大高さを設定する必要があり
.hide{
opacity :0;
}
を更新し、以下のようにクラス.hideを追加します。設定された背景スクロールを無効にする...
.ui-dialog-content {
max-height: 500px;
min-height: 200px;
overflow-x: hidden;
overflow-y: auto;
padding: 15px;
}
を絶対値ではなく、割合を使用します。ダイアログが表示されている間、あなたがtrueにisMyDialogVisibleを設定
<body [ngClass]="'<class for overflow: hidden>': isMyDialogVisible" ...>
。
答えをありがとうございます。しかし、その間、私たちは素数からagグリッドに切り替え、モーダルダイアログのようなコンポーネント用のuiライブラリを構築しました。コンポーネントのinitilizeと 'overflow： '' ondestroyのときに、私が構築した特定のui-modal要素は
に' overflow：hidden'を設定します。 – Philまた別のプラグインにコンポーネントまたは別のものを切り替えました:( PrimeNgアップデートがクラッシュすることがあります（アップロードコンポーネントのような）コンポーネント、そして一部のPrimeNgコンポーネントは、まったく動作しません。 私はこのプロジェクトまでプライムに満足していましたが、材料設計に固執し、次のプロジェクトでPrimeNgを使用しないようにします。 。 – Guntram
ありがとうございました。ダイアログスクロールがアクティブなときに背景スクロールを無効にする方法を知っていますか？私のアプローチは、index.htmlからindex.htmlをコンポーネントに移動し、ngstyle/ngclassを使用することですが、これはむしろハッキーで直感的ではなく、小さな機能を修正するためにプログラムの大きな部分を操作します。 – Phil
更新された回答を確認@Phil – Aravind