Primefaces 对话框总是出现在左下角答案

【问题标题】：Primefaces dialog always appearing in bottom left cornerPrimefaces 对话框总是出现在左下角
【发布时间】：2017-04-08 11:41:09
【问题描述】：

我在我的 JSF 项目中创建了一个 primeface 对话框。它有以下代码：

<p:dialog id="abc" modal="true" position="center" 
styleClass="pdialog-gen pdialog-gen-height-ext" style="left: 340px !important;"
 draggable="false" closable="true" appendTo="@(body)" dynamic="true"
        resizable="false" widgetVar="ab">

它总是出现在左下角。虽然我想让它出现在中心。即使我使用了位置属性，它仍然出现在左下角。您能就此提出建议吗？

Edit1：当我右键单击网页并执行“检查元素”以查看代码，例如它在相应 html 中的呈现方式时，我看到以下代码：

    <div id="abc" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow pdialog-gen pdialog-gen-height-ext ui-overlay-visible" 
    style="width: auto; height: auto; left: 0px; top: 341.5px; 
visibility: visible; z-index: 1002;"
     role="dialog" aria-labelledby="abc_title" aria-hidden="false" aria-live="polite">

我不知道它从哪里挑选内联样式。有人可以就此提出建议吗？

Edit-2 我知道了解决方案。我为 #abc 编写了一个 CSS 样式，其中我定义了 left:240px;解决了我的问题。线程关闭。谢谢大家。

【问题讨论】：

标签： css primefaces jsf-2

【解决方案1】：

你可能想删除left: 340px !important;

并应用其容器 margin: 0 auto; 这将使其居中

【讨论】：

【解决方案2】：

p:dialog 显示为默认设置居中。你把<p:dialog> 标签放在哪里了？可能是样式类：

styleClass="pdialog-gen pdialog-gen-height-ext"

【讨论】：

你看不到标签吗？
您将它作为另一个组件的子组件插入？可以试试去掉 styleCass 和 style 属性吗？
Faoucault：是的，我尝试删除 style 和 styleClass 属性，结果导致对话框消失。我已经编辑了我的问题并提供了更多详细信息。你能帮忙吗？

【解决方案3】：

我知道造成此问题的两个原因。

使用 JQuery-UI，会与 Primefaces 的库发生冲突。
将 Richfaces 与 Primefaces 结合使用也会产生此问题。

【讨论】：