jsf-2 - 如何<p :dialog>'s position remain center of a page after increasing its size dynamically?

Question

在我的应用程序中，我有一个 <p:dialog> ，在对话框中我放置了 h:selectBooleanCheckbox 。如果选中此项，则将出现下面的一行，否则会出现 该行将隐藏。默认情况下，对话框的位置是页面的中心。现在问题是当我检查这个booleanCheckbox时对话框的高度和宽度是 随着新行的内容大于前一行的内容而增加 dialog ，那么该位置不会保持在页面的中心，我的意思是对话框的大小增加底部和右侧。 增加内容后如何在中心显示对话框？任何指针都会对我很有帮助。谢谢，

对不起，我的英语不好。

.xhtml的代码如下:

<p:dialog id="popUp" widgetVar="popUpWidget"
  showEffect="fade" hideEffect="explode" resizable="false" modal="true">
    <p:row>
        <h:outputLabel value="#{adbBundle['addRemoveActivityManagers']}" />
        <h:selectBooleanCheckbox value="#{activityListController.editActivityManager}" immediate="true">
            <p:ajax event="click" update="adminPanel" listener="#{activityListController.updateActivityManager}"/>
        </h:selectBooleanCheckbox>
    </p:row>
    <p:row rendered="#{activityListController.editActivityManager}">
        <p:column>
            <p:dataTable id="sourceManagerDataTable" value="#{activityListController.activitySourceUsers}" var="manager" liveScroll="true" scrollRows="5" 
                scrollHeight="125" selection="#{activityListController.selectedActivitySourceUsers}" selectionMode="multiple"
                filteredValue="#{activityListController.filteredSourceUsers}" scrollable="true" styleClass="activityManager">
                <f:facet name="header">
                    <h:outputText value="Available Managers" />
                </f:facet>
                <p:column headerText="Full Name" sortBy="#{manager.lastName}" filterBy="#{manager.fullName}" filterMatchMode="contains">
                    <h:outputText value="#{manager.lastName}, #{manager.firstName}" />
                </p:column>
            </p:dataTable>
        </p:column>
    </p:row></p:dialog>

Answer 1

因此，当您单击复选框或选中它时，会调用一个重新呈现对话框的函数，因此请将此 onstart="setSize();" 添加到您 p:ajax:

下面是 JavaScript 函数:

function setSize () {
 $(".ui-dialog").css ({
    "width": 300,
    "height": 200,
    "left": "50%",
    "top": "50%",
    "margin-left": -150,
    "margin-top": -100
  });
}

不要忘记，如果您决定更改高度或宽度值，您应该将边距值指定为它们的-1/2倍。我给出的值不确定您是否应该更改它们是否应该更大或其他什么。

如果您想检测未选中的复选框并根据其状态设置高度，我们的函数可以是......像这样:

function setSize () {
var checkBox = $(document.getElementById('myCheckBox'));
$('.ui-dialog').css ({
    'width' : 300,
    'height': 200,
    'left': "50%",
    'top': "50%",
    'margin-left': -150,
    'margin-top': -100
    });
if(!checkBox.checked) {//If it doesn't checked; it can be checkBox.attr('checked')
    $(".ui-dialog").css ({
        "height": 150, //New height value which is starting dialog height when it's unchecked
        "margin-top": -75
        });
    }
}
}

您应该提供复选框的正确 clientID，您也可以在浏览器的开发人员选项中看到它，而不是这个； height:auto; 也可以工作。