调整大小后，Primefaces 对话框粘在右侧屏幕边框上答案

【问题标题】：Primefaces dialog glued to right screen border after resize调整大小后，Primefaces 对话框粘在右侧屏幕边框上
【发布时间】：2013-12-03 03:01:11
【问题描述】：

我有一个带有 selectOneMenu 的对话框。用户选择决定，按下“确定”，对话内容根据决定改变（渲染 content1.xhtml 或 content2.xhtml）。

问题是初始组合非常小，而 content1.xhtml 包含一个宽表。当用户选择“decision1”并按下“确定”时，对话框会延伸到屏幕的右边框。它不再居中，用户无法移动它（当他尝试时，它会伸展而不是移动）。

<p:dialog id="mainDialogId" widgetVar="mainDialog" modal="true" appendToBody="true" >
    <p:messages autoUpdate="true" />
    <h:form id="mainForm">
        <p:panel rendered="#{bean.mode eq 'mode0'}">    
            <p:selectOneMenu id="mainCombo" value="#{bean.decision}" style="width: 100%;">
                <f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
                <f:selectItem id="decision1" itemValue="decision1" itemLabel="decision1" />
                <f:selectItem id="decision2" itemValue="decision2" itemLabel="decision2" />
            </p:selectOneMenu>
            <h:panelGroup style="display:block; text-align:right">
                <p:commandButton id="ok" value="ok"
                    actionListener="#{bean.handleDecision()}"
                    update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}" >
                </p:commandButton>
                <p:commandButton id="cancel" value="cancel" oncomplete="mainDialog.hide();" immediate="true" />
            </h:panelGroup>
        </p:panel>
    </h:form>
    <h:form id="form1" >
        <p:panel id="panel1" rendered="#{bean.mode eq 'mode1'}" >
            <ui:include src="/WEB-INF/contents/content1.xhtml" />
        </p:panel>
    </h:form>
    <h:form id="form2">
        <p:panel id="panel2" rendered="#{bean.mode eq 'mode2'}" >
            <ui:include src="/WEB-INF/contents/content2.xhtml" />
        </p:panel>
    </h:form>
</p:dialog>

这是一个显示对话框的按钮：

<p:commandButton value="Go" action="#{bean.prepare()}" update=":#{p:component('mainDialogId')}" oncomplete="mainDialog.show()" />

当我改变时：

update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}"

到：

update=":#{p:component('mainDialogId')}"

按下“确定”后，对话框消失。

设置固定对话框宽度 (width="600") 会有所帮助，但这不是解决方案（在这两种情况下看起来都很糟糕）。我希望对话框在调整大小后自行居中。

请帮忙。

Primefaces 3.5

【问题讨论】：

标签： jsf jsf-2 primefaces dialog positioning

【解决方案1】：

当我更改为：

update=":#{p:component('mainDialogId')}"

这是正确的解决方案。坚持下去。您需要更新 <p:dialog> 本身以使其适合。

按下“确定”后，对话框消失。

如果按下“确定”按钮，则通过检查对话框的 visible 属性来防止这种情况发生：

<p:dialog ... visible="#{not empty param[ok.clientId]}">
    ...
    <p:commandButton binding="#{ok}" ... />
    ...
</p:dialog>

【讨论】：