Primefaces对话框设置半屏尺寸

Question

我正在使用Primefaces 5.1。在我的页面中，我使用dialog和height属性。我需要将屏幕尺寸的70％设置为对话框因为屏幕高度与所有系统不同所以我需要设置动态高度。我需要用javascript或css来设置基于高度的屏幕吗？

<p:dialog widgetVar="dialogWidget" id="dialogId" position="center,top" height="height to set">
........
</p:dialog>

Answer 1

首先定义一个css类

.autoWidthDialog {
    width: auto !important;
}

然后在对话框中使用上面的css

<p:dialog id="dialog" styleClass="autoWidthDialog" header="My dialog">
  ... content ...
</p:dialog>

这是一个非常古老的解决方法，可能是在最新的Primefaces中他们添加了autosize属性。

另一种解决方案可以使用一些带有样式属性的样式

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

</p:dialog>

Answer 2

<p:dialog style="height: 70vh" ...或<p:dialog height="70vh" ...