PrimeFaces con finestre di dialogo grandi - come farlo correttamente?

Question

Come utilizzare le grandi finestre di dialogo PrimeFaces in modo corretto?

Le finestre di dialogo nel mondo HTML sono stati pensati per essere utilizzati solo per i messaggi e le domande semplici, ma non sono spesso utilizzati per la scelta l'elemento da DataTable, per esempio. Non è il caso d'uso corretto?

DataTable può essere grande, in entrambe le direzioni. Possiamo usare paginator e visualizzare solo 5 righe, limitando la funzionalità. Perché non visualizzare 15, se lo consente lo schermo utente? Possiamo dare all'utente la possibilità di scegliere il numero di righe visualizzate, sì o no?

Ma se lo facciamo, e se l'utente sceglie 15 righe sul piccolo schermo, il dialogo diventa più grande di quello schermo e non ci può essere nulla da fare con questa finestra di dialogo, perché i pulsanti di chiusura non sono più disponibili. Un grosso, cattivo insetto IMHO.

Ma in base a questo forum di discussione http://forum.primefaces.org/viewtopic.php?f=3&t=19211 non c'è niente di sbagliato in questo, e anche è dato la soluzione: Non utilizzare le finestre di dialogo a tutti! Ma non credo in tali soluzioni perché so che i browser hanno scroll e se il contenuto è più grande dello schermo, viene visualizzata la pergamena. Quindi, almeno teoricamente, è possibile aggiungere la finestra di dialogo alla pagina nel modo in cui viene visualizzata la pergamena. È possibile aggiungere dei div di 0px widht e 0px height che adatteranno la pagina principale alla larghezza e all'altezza della finestra di dialogo più grande visualizzata, in modo che sia sempre possibile per l'utente trascinare la finestra di dialogo nella pagina in alto e accedere a pulsanti in basso.

La mia domanda è: come posso risolvere o risolvere questo problema con grandi finestre di dialogo? Come farli visualizzare completamente se sono più grandi della finestra corrente?

Answer 1

Il problema generale era la mancanza di qualsiasi codice di adattamento della dimensione del documento per la finestra di dialogo in PrimeFaces. Il peggio era il dialogo di impostazione come posizione: fisso che li rendeva non scorrevoli. Così ho lasciato la position: fixed quando la finestra era conveniente nella finestra, la posizione altrimenti ho impostato: assoluta e adattare dimensioni del documento in modo che possa adattarsi finestra di dialogo (che ha permesso lo scorrimento):

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