Primefaces 对话框位置问题

Question

我正在使用 primefaces v 8.0 我遇到了 p:dialog 组件的问题，它的位置不在顶部，并且未显示对话框的一半我已经尝试了很多方法也尝试更改 CSS，如下所示：

.ui-dialog{
     top: 0px !important;
 }

遵循我使用的代码：

<p:dialog header="#{msg.image_description}" widgetVar="imageDescriptionDlg" id="imageDescriptionDlg"
                  dynamic="true"
                  showEffect="fade" width="70%" height="650" draggable="false"
                  hideEffect="fade">
            <div class="ui-g">

我在其他视图中使用相同的组件，但没有遇到对话框被关闭且部分未显示的问题，因为它位于屏幕底部

Answer 1

有两件事...尝试将这两个属性添加到您的对话框中。

1. fitViewport="true"

   如果内容的高度大于视口，对话框大小可能会超过视口。 fitViewport 选项自动调整高度以适应视口内的对话框。

2. responsive="true"

   在响应模式下，对话框会根据屏幕宽度自行调整。

我感觉这些设置中的一个或两个将解决您的问题。

PF 8.0 的文档参考：https://primefaces.github.io/primefaces/8_0/#/components/dialog?id=dialog

Answer 2

尝试添加：

onShow="PF('widgetNameOfTheDialogHere').initPosition()"

到您的 p: 对话框。