在我的应用程序中,我有一个<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>
答案 0 :(得分: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
});
}
}
}
您应该提供您的复选框的正确clientID,您可以在浏览器的开发人员选项中看到也可能代替此; height:auto;
也可以正常运作。