5

webapp に ajax ロード モーダル ダイアログがあります。

<p:dialog widgetVar="statusDialog" modal="true" draggable="false" minimizable="false" appendToBody="true"
    closable="false" header="Processing..." resizable="false" maximizable="false" style="overflow:hidden !important; overflow-x: hidden !important; width:auto;">  
     <p:graphicImage library="assets" name="ajax-loader.gif" style="overflow:hidden !important; overflow-x: hidden !important;"></p:graphicImage> 
</p:dialog>
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>

CSS スタイル (overflow/overflow-x などのさまざまな組み合わせを試しました) に関係なく、水平 (垂直は非表示、問題ありません) スクロールバーを表示します。また、appendToBody 属性をいじってみました。

水平スクロールバーを無効にする必要があります。

編集: これは PrimeFaces によってレンダリングされた HTML です

<div id="j_idt18" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-overlay-hidden" style="overflow: hidden; width: auto; height: auto; left: 832px; top: 210px; visibility: hidden; z-index: 1003; display: block;" role="dialog" aria-labelledby="j_idt18_title" aria-hidden="true" aria-live="off">
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top">
<span id="j_idt18_title" class="ui-dialog-title">Processing...</span>
</div>
<div class="ui-dialog-content ui-widget-content" style="height: auto;"><img id="j_idt19" src="/webapp/do/javax.faces.resource/ajax-loader.gif?ln=assets" alt="">
</div>
</div>

独自のスタイルシートでデフォルトのダイアログ CSS をオーバーライドすることで、スクロールバーを取り除くことができました。

.ui-dialog-content {
    overflow: hidden !important;
}

ただし、これは ajax 読み込みダイアログだけでなく、すべてのダイアログに影響します。ダイアログごとにそのスタイルをオーバーライドできるようにしたいと考えています。それ、どうやったら出来るの？

4

1 に答える 1

10

statusDialogダイアログに追加しますstyleClass="disable-scroll"。

また、このための CSS ルールを作成します。

.disable-scroll .ui-dialog-content {
  overflow: hidden !important;
}

これにより、このカスタム クラスを持つすべてのダイアログに CSS が適用されます。

于 2013-02-28T13:07:33.057 に答える