PrimeFaces có hộp thoại lớn - cách thực hiện điều này đúng?

Question

Cách sử dụng các hộp thoại chính PrimeFaces chính xác?

Các hộp thoại trong HTML thế giới đầu tiên được nghĩ đến chỉ được sử dụng cho các tin nhắn và những câu hỏi đơn giản, nhưng không phải chúng thường được sử dụng cho chọn phần tử từ DataTable, ví dụ. Đó không phải là trường hợp sử dụng hợp lý sao?

DataTable có thể lớn, theo cả hai hướng. Chúng ta có thể sử dụng paginator và chỉ hiển thị 5 hàng, hạn chế chức năng. Tại sao không hiển thị 15, nếu màn hình người dùng cho phép điều đó? Chúng tôi có thể cung cấp cho người dùng khả năng chọn số hàng được hiển thị, có hay không? Nhưng nếu chúng ta làm điều đó, và nếu người dùng chọn 15 hàng trên màn hình nhỏ, hộp thoại sẽ trở nên lớn hơn màn hình đó và có thể không có gì được thực hiện với hộp thoại này, bởi vì các nút đóng không còn khả dụng nữa. Một lỗi lớn, khó chịu IMHO.

Nhưng theo diễn đàn thảo luận này http://forum.primefaces.org/viewtopic.php?f=3&t=19211 không có gì sai với điều đó và thậm chí giải pháp được đưa ra: Không sử dụng hộp thoại nào cả! Nhưng tôi không tin vào các giải pháp như vậy vì tôi biết rằng các trình duyệt có cuộn và nếu nội dung lớn hơn màn hình, cuộn sẽ hiển thị. Vì vậy, ít nhất về mặt lý thuyết, có thể thêm hộp thoại vào trang theo cách mà cuộn hiển thị. Có thể thêm một số chiều rộng 0px và div chiều cao 0px sẽ điều chỉnh trang chính thành chiều rộng và chiều cao của hộp thoại lớn nhất được hiển thị, để người dùng có thể kéo hộp thoại đến đầu trang và có quyền truy cập vào nút dưới cùng.

Câu hỏi của tôi là: Làm cách nào để khắc phục hoặc khắc phục sự cố đó với các hộp thoại lớn? Làm cách nào để chúng hiển thị đầy đủ nếu chúng lớn hơn chế độ xem hiện tại?

Answer 1

Vấn đề chung là thiếu bất kỳ mã thích ứng kích thước tài liệu nào để đối thoại trong PrimeFaces. Tệ hơn là hộp thoại cài đặt là vị trí: cố định khiến chúng không thể cuộn được. Vì vậy, tôi đã rời khỏi vị trí: cố định khi hộp thoại được lắp vào cửa sổ, nếu không tôi đã đặt vị trí: tuyệt đối và điều chỉnh kích thước tài liệu sao cho có thể vừa với hộp thoại (cho phép cuộn):

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