PrimeFaces with big dialogs - how to do this correct? [closed]

Question

How to use the PrimeFaces big dialogs in correct way?

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?

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?

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.

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?

Answer 1

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