PrimeNG模式對對話沒有滾動

我先前提交的issue關於這一點，但也許我只是失去了一些東西，所以這裏是我的問題：PrimeNG模式對對話沒有滾動

我有一個屏幕四溢的數據表，從中我選擇項目，它彈出爲模態對話框。不幸的是，我無法滾動工作在p對話框上。

做<p-dialog [style]="{'margin':'80px', 'overflow':'scroll'}">只會因爲某種原因在模式對話框上創建一個水平滾動條。

爲了讓事情變得更糟，滾動仍然在背景上工作，我希望它是靜態的。

如何在p對話框上創建滾動（垂直！）並關注它，禁用同時滾動背景？

參見plunker：http://plnkr.co/edit/6H0Q2Cm0184pLw3bto1h?p=preview

來源

2017-05-27 Phil

您應該應用滾動到p-dialog而不是爲了ul標籤下面，

p-dialog .ui-dialog { 
    overflow: scroll; 
    max-height: 70%; 
}

原因：p-dialog包含其中包含與類內部的div一個div ui-dialog-content其默認溢出屬性爲auto。所以要覆蓋它，你需要設置在根級別。按照下面的調查。

注意：

使用%到preseve響應
還可以使用max-height屬性設置模式的最大高度超過該出現滾動條

要隱藏背景你應該使用如下，

<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如下，

.hide{ 
    opacity :0; 
}

更新LIVE DEMO

來源

2017-05-27 20:12:09 Aravind

非常感謝。你可能知道在對話滾動處於活動狀態時如何禁用後臺滾動？我的方法是將從index.html移動到一個組件上，並使用ngstyle/ngclass，但這看起來相當冒險和不直觀，並且操縱了程序的很大一部分來修復小功能。 – Phil

檢查更新的答案@菲爾 – Aravind

應設置最小高度和最大高度。使用絕對值，而不是百分比...

.ui-dialog-content { 
    max-height: 500px; 
    min-height: 200px; 
    overflow-x: hidden; 
    overflow-y: auto; 
    padding: 15px; 
}

禁用背景滾動，設置：

<body [ngClass]="'<class for overflow: hidden>': isMyDialogVisible" ...>

你設置isMyDialogVisible爲true，在顯示的對話框。

來源

2017-08-28 09:42:57 Guntram

謝謝你的答案。但與此同時，我們從prime-ng切換到ag-grid，併爲模塊對話框等組件構建了一個ui庫。我構建的這個特定的UI模式元素在上設置'overflow：hidden'，當組件啓動並溢出時：'''ondestroy – Phil

我們也切換到一個組件或另一個組件：（有時PrimeNg更新崩潰一個組件（如上傳組件）和一些PrimeNg組件根本無法正常工作我將堅持使用PrimeNg進行下一個項目的材料設計和disencourage--儘管我對這個項目的總理感到非常滿意。。 – Guntram

PrimeNG模式對對話沒有滾動

回答

相關問題