PrimeFaces如何正确处理大型对话框？

Question

如何正确使用 PrimeFaces 的大对话框？

在 HTML 中，对话框最初被认为只用于消息和简单问题，但现在它们经常用于从 DataTable 中选择元素。这难道不是正确的使用情况吗？ DataTable 本身可能很大，在两个方向上都是如此。我们可以使用分页器仅显示 5 行，从而限制功能。如果用户屏幕允许，为什么不显示 15 行呢？我们可以给用户选择显示行数的可能性，是或否？

但是，如果我们这样做，如果用户在小屏幕上选择了 15 行，则对话框会变得比该屏幕更大，因此无法再使用该对话框，因为关闭按钮已不再可用。我认为这是一个大而丑陋的错误。

但是根据这个论坛讨论http://forum.primefaces.org/viewtopic.php?f=3&t=19211，这没有任何问题，甚至提供了解决方案：根本不要使用对话框！ 但我不相信这样的解决方案，因为我知道浏览器有滚动条，如果内容比屏幕大，滚动条会显示。因此，至少在理论上，可以以使滚动条显示的方式将对话框添加到页面中。可以添加一些0像素宽度和0像素高度的div，使主页面适应显示的最大对话框的宽度和高度，以便用户始终可以将对话框拖到页面顶部并访问底部按钮。

我的问题是：如何修复或解决大对话框的问题？如果它们比当前视口更大，如何让它们完全显示？

- Danubian Sailor

Answer 1

问题在于PrimeFaces中没有任何文档大小适应对话框的代码。更糟糕的是，将对话框设置为position:fixed会使其无法滚动。因此，当对话框适合窗口时，我保留了position:fixed，否则我将其设置为position:absolute，并调整文档大小以适应对话框（从而启用滚动）：

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);
}

- Danubian Sailor

---

酷，但你在哪里调用它？ - linker85

通常在调用对话框的 .open() 方法后立即执行 @linker85。 - Danubian Sailor

嗨，谢谢。但是我应该传递什么参数？ - Malte