如何删除 PrimeFaces 对话框中的滚动条？答案

【问题标题】：How to remove scrollbar in PrimeFaces dialog?如何删除 PrimeFaces 对话框中的滚动条？
【发布时间】：2013-02-22 16:26:40
【问题描述】：

我的 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 样式（我尝试了各种溢出/溢出-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 加载对话框。我希望能够在每个对话框的基础上覆盖该样式。我该怎么做？

【问题讨论】：

你试过这些风格吗？overflow-y: scroll;溢出-x：隐藏；反之亦然。
@ComputerGeek，我试过“overflow-y:scroll” - 显示垂直滚动条。试过“overflow-x: hidden;”，它没有隐藏水平滚动条。
看看这个链接有没有帮助social.technet.microsoft.com/Forums/en/…
并查看此链接中的任何答案是否适合您bugs.jqueryui.com/ticket/3623
iframe 技巧不起作用。我不想开始更改 JQuery 源 - 这是一种 hacky 并且在我升级 PrimeFaces 时必然会中断的方式。我添加了有问题的渲染 HTML

标签： css primefaces

【解决方案1】：

在你的statusDialog对话框中添加styleClass="disable-scroll"。

另外，为此创建 CSS 规则：

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

这会将 CSS 应用到具有此自定义类的所有对话框。

【讨论】：