簡體   English   中英

如何在PrimeFaces對話框中刪除滾動條?

[英]How to remove scrollbar in PrimeFaces dialog?

我的web應用程序中有一個加載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-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加載對話框。 我希望能夠在每個對話框的基礎上覆蓋該樣式。 我怎么做?

在您的statusDialog對話框中,添加styleClass="disable-scroll"

另外,為此創建CSS規則:

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

這會將CSS應用於具有此自定義類的所有對話框。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM