Question

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

Sory因为我的英语不好。

.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;也可以正常运作。

在动态增加页面大小后，<p：dialog>的位置如何保持页面的中心位置？</p：dialog>

1 个答案: