PrimeFaces mit großen Dialogen - wie macht man das richtig?

Question

Wie verwenden Sie die PrimeFaces große Dialoge in der richtigen Weise?

Die Dialoge in HTML-Welt wurden gedacht, zunächst nur für Nachrichten und einfache Fragen verwendet werden, aber nicht, dass sie oft verwenden für das Element aus Datatable, zum Beispiel der Wahl. Ist es nicht der richtige Anwendungsfall?

Die DataTable kann in beiden Richtungen groß sein. Wir können Paginator verwenden und nur 5 Zeilen anzeigen, wodurch die Funktionalität eingeschränkt wird. Warum nicht 15 anzeigen, wenn der Benutzerbildschirm dies zulässt? Wir können dem Benutzer die Möglichkeit geben, die angezeigte Zeilennummer zu wählen, ja oder nicht?

Aber wenn wir das tun, und wenn der Benutzer 15 Zeilen auf einem kleinen Bildschirm auswählt, wird der Dialog größer als dieser Bildschirm und es kann nichts mit diesem Dialog gemacht werden, da keine nahen Knöpfe mehr verfügbar sind. Ein großer, böser Bug IMHO.

Aber nach dieser Forumsdiskussion http://forum.primefaces.org/viewtopic.php?f=3&t=19211 ist nichts falsch daran, und selbst die Lösung ist gegeben: Verwenden Sie keine Dialoge überhaupt! Aber ich glaube nicht an solche Lösungen, weil ich weiß, dass Browser scrollen, und wenn der Inhalt größer als der Bildschirm ist, wird die Bildlauf angezeigt. Es ist also zumindest theoretisch möglich, den Dialog auf der Seite so anzulegen, wie die Bildlaufleiste anzeigt. Es ist möglich, einige 0px width und 0px height divs hinzuzufügen, die die Hauptseite an die Breite und Höhe des größten angezeigten Dialogs anpassen, so dass es für den Benutzer immer möglich ist, den Dialog auf die Seite zu ziehen und Zugriff darauf zu erhalten untere Tasten.

Meine Frage ist: Wie kann ich das Problem mit großen Dialogen beheben oder umgehen? Wie können sie vollständig angezeigt werden, wenn sie größer als das aktuelle Ansichtsfenster sind?

Answer 1

Das generelle Problem war das Fehlen jeglicher Anpassung der Dokumentgröße für den Dialog in PrimeFaces. Umso schlimmer waren die Einstelldialoge als position: fixed, die sie nicht scrollbar machten. Also habe ich die Position links: fixiert, wenn der Dialog in Fenster geziemte, sonst I gesetzt Position haben: absolute und Dokumentgröße anpassen, damit Dialog passen könnte (die aktiviert scrollen):

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