帶有大對話框的PrimeFaces - 如何正確執行此操作？

Question

如何使用PrimeFaces大對話框在正確的方式？

在HTML世界的對話中首先想到的消息和簡單的問題，只使用，而不是它們通常用於選擇元素從的DataTable，例如。這不正確的用例嗎？

數據表可大了自己，在兩個方向上。我們可以使用paginator並只顯示5行，限制功能。爲什麼不顯示15，如果用戶屏幕允許？我們可以給用戶選擇顯示的行號的可能性，是或不是？

但是，如果我們這樣做，如果用戶選擇小屏幕上15行，對話變得更大的是該屏幕並且可以有什麼與此對話框中完成，因爲關閉按鈕不再可用。一個大的，討厭的錯誤恕我直言。

但根據這個論壇討論http://forum.primefaces.org/viewtopic.php?f=3&t=19211沒有什麼不對，甚至解決方案是：根本不要使用對話框！但我不相信這樣的解決方案，因爲我知道瀏覽器有滾動，並且如果內容大於屏幕，滾動顯示。因此，至少在理論上，可以通過滾動顯示的方式將對話框添加到頁面。它可以添加一些0像素widht和0像素高度的div將顯示在主頁適應寬度和最大對話的高度，所以，這將是總是可能的用戶對話框拖動到頁面頂部並訪問底部按鈕。

我的問題是：如何解決或變通與大對話框這個問題？如果它們比當前視口更大，如何讓它們完全顯示？

Answer 1

普遍的問題是缺乏任何文件大小適應代碼對話框中PrimeFaces。更糟糕的是設置對話框的位置：固定，使他們不可滾動。所以，我已經離開了位置：當對話框被裝配到窗口固定，否則我給自己定的位置是：絕對和調整文件大小，以便能適應對話框（這使滾動）：

function handleResizeDialog(dialog) { 
    var el = $(dialog.jqId); 
    var doc = $('body'); 
    var win = $(window); 
    var elPos = ''; 
    var bodyHeight = ''; 
    var bodyWidth = ''; 
    // position:fixed is maybe cool, but it makes the dialog not scrollable on browser level, even if document is big enough 
    if (el.height() > win.height()) { 
     bodyHeight = el.height() + 'px'; 
     elPos = 'absolute'; 
    } 
    if (el.width() > win.width()) { 
     bodyWidth = el.width() + 'px'; 
     elPos = 'absolute'; 
    } 
    el.css('position', elPos); 
    doc.css('width', bodyWidth); 
    doc.css('height', bodyHeight); 
    var pos = el.offset(); 
    if (pos.top + el.height() > doc.height()) 
     pos.top = doc.height() - el.height(); 
    if (pos.left + el.width() > doc.width()) 
     pos.left = doc.width() - el.width(); 
    var offsetX = 0; 
    var offsetY = 0; 
    if (elPos != 'absolute') { 
     offsetX = $(window).scrollLeft(); 
     offsetY = $(window).scrollTop(); 
    } 
    // scroll fix for position fixed 
    if (pos.left < offsetX) 
     pos.left = offsetX; 
    if (pos.top < offsetY) 
     pos.top = offsetY; 
    el.offset(pos); 
}