Question

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

HTML世界中的对话框首先被认为仅用于消息和简单问题，但它们通常不用于选择来自 DataTable 的元素，例如。这不是正确的用例吗？

DataTable在两个方向上都可以很大。我们可以使用paginator并只显示5行，从而限制了功能。如果用户屏幕允许，为什么不显示15？我们可以让用户选择显示的行号，是或否？

但是如果我们这样做，并且如果用户在小屏幕上选择15行，则该对话框会变得比该屏幕更大，并且此对话框无法完成任务，因为关闭按钮不再可用。一个大而讨厌的错误恕我直言。

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

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

Answer 1

一般问题是在PrimeFaces中没有任何文档大小适配代码来对话。更糟糕的是设置对话框作为position：fixed使它们不可滚动。所以我离开了位置：当对话框适合窗口时固定，否则我设置位置：绝对并调整文档大小以便适合对话框（启用滚动）：

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

PrimeFaces有很大的对话框 - 如何做到这一点？

1 个答案: