큰 대화 상자가있는 PrimeFaces -이 작업을 올바르게 수행하는 방법은 무엇입니까?

Question

PrimeFaces 대화 상자를 올바르게 사용하는 방법은 무엇입니까? HTML 세계에서

대화 상자가 먼저 메시지와 간단한 질문에만 사용하는 것으로 생각했지만, 그들은 종종 예를 들어, DataTable을에서 요소를 선택하기 위해 사용되는 것은 아닙니다. 적절한 사용 사례가 아닌가?

DataTable은 양방향으로 큰 크기 일 수 있습니다. paginator를 사용하여 5 행만 표시하여 기능을 제한 할 수 있습니다. 사용자 화면에서 허용하는 경우 15을 표시하지 않는 이유는 무엇입니까? 우리는 사용자에게 표시된 행 수를 선택할 수있는 가능성을 부여 할 수 있습니까?

그러나 사용자가 작은 화면에서 15 개의 행을 선택하면 대화 상자가 그 화면보다 커지고이 대화 상자에서는 아무 것도 닫히지 않을 수 있습니다. 왜냐하면 닫기 버튼을 더 이상 사용할 수 없기 때문입니다. 크고 불쾌한 버그 IMHO.

그러나이 포럼 토론 http://forum.primefaces.org/viewtopic.php?f=3&t=19211에 따르면 아무 문제가 없으며 해결 방법도 제공됩니다. 대화 상자를 전혀 사용하지 마십시오!하지만 브라우저에 스크롤이 있다는 것을 알고 있기 때문에 이러한 솔루션을 믿지 않습니다. 콘텐츠가 화면보다 크면 스크롤이 표시됩니다. 따라서 적어도 이론적으로 스크롤이 표시되는 방식으로 페이지에 대화 상자를 추가 할 수 있습니다. 0px widht와 0px 높이 div를 추가하여 표시되는 가장 큰 대화 상자의 너비와 높이에 맞게 기본 페이지를 조정할 수 있으므로 사용자가 대화 상자를 페이지 상단으로 드래그하여 액세스 할 수 있습니다. 아래쪽 버튼.

내 질문은 : 큰 대화 상자로 어떻게 그 문제를 해결할 수 있습니까? 현재 뷰포트보다 더 커지면 어떻게 표시 할 수 있습니까?

Answer 1

일반적인 문제는 PrimeFaces에서 대화에 대한 문서 크기 적응 코드가 부족하다는 것입니다. 설정 대화 상자가 위치 : 고정으로되어있어서 스크롤 할 수 없게되었습니다. 절대 그 대화에 맞게 수 있도록 (스크롤 활성화하는) 문서 크기를 적용 : 대화 창에 피팅 할 때 고정 그렇지 않으면 내가 설정 한 위치 : 그래서 위치를 왼쪽으로 한

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