如何在 primefaces 中创建具有百分比高度的对话框

Question

我想在 primefaces 中创建一个 p:dialog 组件，其大小以百分比给出：

<p:dialog header="Dialog" widgetVar="dlg" width="70%" height="70%">
  Some content
</p:dialog>

上面的代码创建了一个具有正确宽度值的组件。但是，对话框的高度设置为某个非常小的值（绝对不是 70%）。

我的问题是：如何为对话框设置百分比高度？

我做了一些研究，发现在 primefaces 代码中 height 值明确地是 set to 'auto' and height attribute is assigned to content div。这解释了为什么我的代码不起作用，但我可以做些什么来克服这个问题？

Answer 1

高度和宽度可能以像素为单位，请尝试使用样式

<p:dialog ... style="width:70% !important; height:70% !important;">
   Some content
</p:dialog>

Answer 2

我找到了一种使用 javascript 的方法。应修改组件定义：

<p:dialog id="dialog" header="Dialog" widgetVar="dlg" width="70%" height="100%">
  Some content
</p:dialog>

这样内容就会完全填满对话框。现在应该调用以下 javascipt 代码：

var htmlTag = document.getElementById('dialog');
htmlTag.style.height = Math.floor(window.innerHeight*0.7)+"px";

这会将对话框高度调整为 window 高度的 70%。

How to create dialog with percentage height in primefaces