9

PrimeFacesの大きなダイアログを正しい方法で使用するにはどうすればよいですか？

HTMLの世界のダイアログは、最初はメッセージと簡単な質問にのみ使用されると考えられていましたが、たとえばDataTableから要素を選択するために使用されることはあまりありません。それは適切なユースケースではありませんか？

DataTable自体は、両方向で大きくなる可能性があります。paginatorを使用して、機能を制限する5行のみを表示できます。ユーザー画面で許可されている場合は、15を表示しないのはなぜですか？表示された行番号をユーザーが選択できるようにすることができますか？

しかし、そうすると、ユーザーが小さな画面で15行を選択すると、ダイアログはその画面よりも大きくなり、閉じるボタンが使用できなくなるため、このダイアログでは何もできなくなります。大きくて厄介なバグ私見。

しかし、このフォーラムのディスカッションhttp://forum.primefaces.org/viewtopic.php?f=3&t=19211によると、それは何も悪いことではなく、解決策さえも与えられています。ダイアログをまったく使用しないでください。しかし、ブラウザにはスクロールがあり、コンテンツが画面よりも大きい場合はスクロールが表示されることを知っているので、そのような解決策を信じていません。したがって、少なくとも理論的には、スクロールが表示される方法でダイアログをページに追加することが可能です。メインページを表示される最大のダイアログの幅と高さに適応させる0pxwidhtと0pxheightdivを追加することができます。これにより、ユーザーはダイアログをページ上部にドラッグして、にアクセスできるようになります。下のボタン。

私の質問は、大きなダイアログでその問題を修正または回避するにはどうすればよいですか？現在のビューポートよりも大きい場合に完全に表示させるにはどうすればよいですか？

4

1 に答える 1

7

一般的な問題は、PrimeFacesのダイアログにドキュメントサイズを適応させるコードがないことでした。さらに悪いことに、ダイアログをposition：fixedとして設定すると、スクロールできなくなりました。そのため、ダイアログがウィンドウに収まるときにposition：fixedを残しました。それ以外の場合は、position：absoluteを設定し、ダイアログに収まるようにドキュメントサイズを調整しました（スクロールが有効になりました）。

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);
}
于 2012-12-17T16:11:33.413 に答える