PrimeFaces与大对话框 - 如何做到这一点正确？ [英] PrimeFaces with big dialogs - how to do this correct?

问题描述

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

How to use the PrimeFaces big dialogs in correct way?

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

The dialogs in HTML world were first thought to be used only for messages and simple questions, but not they are often used for choosing the element from DataTable, for example. Isn't it the proper use case?

DataTable本身可以很大，在两个方向。我们可以使用分页器并只显示5行，限制了功能。为什么不显示15，如果用户屏幕允许？

The DataTable can be big itself, in both directions. We can use paginator and display only 5 rows, limiting the functionality. Why not to display 15, if user screen allows that? We can give the user the possibility to choose the displayed rows number, yes or not?

但是如果我们这样做，如果用户在小屏幕上选择15行，那么我们可以选择显示的行号，对话框变得比该屏幕大，并且该对话框没有什么可做，因为关闭按钮不再可用。一个大的，讨厌的错误IMHO。

But if we do that, and if the user choose 15 rows on small screen, the dialog becomes bigger that that screen and there can be nothing done with this dialog, because close buttons are no longer available. A big, nasty bug IMHO.

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

But according to this forum discussion http://forum.primefaces.org/viewtopic.php?f=3&t=19211 there's nothing wrong with that, and even the solution is given: Don't use dialogs at all! But I don't believe in such solutions because I know that browsers have scrolls, and if the content is larger than the screen, the scroll displays. So it, at least theoretically, is possible to add the dialog to the page in the way that the scroll displays. It is possible to add some 0px widht and 0px height divs that will adapt the main page to the width and height of the biggest dialog displayed, so that it will be always possible for user to drag the dialog to the page top and get access to bottom buttons.

我的问题是：如何解决或解决这个问题与大对话框？

My question is: How can I fix or work-around that issue with big dialogs? How to let them display fully if they are bigger that the current viewport?

推荐答案

一般问题是缺少任何文档大小适应代码到PrimeFaces中的对话框。更糟糕的是设置对话框作为位置：固定，这使得他们不可滚动。所以我离开了位置：当对话框适合窗口固定，否则我设置位置：绝对和适应文档大小，以适应对话框（它启用滚动）：

The general problem was the lack of any document size adaptation code to dialog in PrimeFaces. The worse was the setting dialogs as position:fixed which made them not scrollable. So I've left the position:fixed when the dialog was fitting into window, otherwise I've set position:absolute and adapt document size so that could fit dialog (which enabled scrolling):

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与大对话框 - 如何做到这一点正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！