jsf-2 - 如何 '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
  });
}

如果您决定更改，请不要忘记 height或 width您应该将边距值设为它们的 -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;也可以工作。