2

在我的应用程序中，我有一个<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>
4

1 回答 1

3

因此，当您单击复选框或选中它时，会调用一个重新呈现对话框的函数，因此将其添加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
        });
    }
}
}

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

于 2013-04-18T16:58:22.600 回答