如何修复primefaces对话框的宽度和高度答案

【问题标题】：how to fix width and height of primefaces dialogbox如何修复primefaces对话框的宽度和高度
【发布时间】：2011-07-31 15:04:27
【问题描述】：

在我的 Web 应用程序中，我想修复 primefaces 对话框的高度和宽度，使对话框恰好出现在我的网页中间，如果想要最小化窗口，那么对话框也应该最小化。我的意思是我的一个框架的中间而不是整个窗口。

即动态大小的对话框，例如 % 宽度和高度

感谢您的帮助...

【问题讨论】：

Primefaces 现在有一个可以最小化的 Dialog 容器，如下所示 - primefaces.org/showcase/ui/overlay/dialog.xhtml?jfwid=f83a4

标签： jsf primefaces dialog

【解决方案1】：

您可以使用以下代码使其具有固定尺寸，

<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" width="300" height="200">  
    <h:outputText value="This is a Modal Dialog." />  
</p:dialog>

并使功能最小化。您可以使用 javascript 来完成它。

另见

Primefaces Show case

【讨论】：

【解决方案2】：

试试这个，使用属性样式（或样式类）：

<p:dialog ... modal="true" style="width:50% !important; height:40% !important; top:25% !important; left: 30% !important;">
  <!-- any components -->
</p:dialog>

查看更多here。

【讨论】：

【解决方案3】：

如果您使用的是 p-dialog，那么您将需要使用内置的 styleClass 属性。

.my-style-class {
    width: 50%;
    height: 70%;
}

&lt;p-dialog styleClass="my-style-class"&gt;&lt;p-dialog&gt;

【讨论】：

这个问题是关于 PrimeFaces，而不是 PrimeNG
我知道，但由于这也是谷歌搜索 p-dialog 的热门搜索，所以我想我会让人们知道，以防他们看到这里。

【解决方案4】：

我尝试使用 JS 修复高度以最小化对话框，但这仍然不适用于大内容：

<p:dialog widgetVar="dlg"
          header="header"
          modal="true"
          width="600"
          max-height="500"
          resizable="false"
          closeOnEscape="true"
          appendToBody="false"
          showEffect="clip"
          hideEffect="explode"
          onShow="PF('dlg').initPosition(); PF('dlg').getJQ().css('max-height', '500px');">

【讨论】：