CODEWITHSUNDEEP
jsfjsf-2primefacesdialogpositioning
Ann
Ann

Reputation: 724

Primefaces dialog glued to right screen border after resize

I've got a dialog with selectOneMenu. User chooses the decision, presses 'ok' and dialog content changes according to decision (rendering content1.xhtml or content2.xhtml).

The problem is that initial combo is very small, whereas content1.xhtml contains a wide table. When user chooses 'decision1' and presses 'ok', the dialog extends to the right border of the screen. It is no longer centered, and the user can't move it (when he tries, it streches instead of moving).

<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>

Here's a button that displays the dialog:

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

When I change:

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

to:

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

after pressing 'ok' the dialog disappears.

Setting fixed dialog width (width="600") helps, but it's not a solution (it looks bad in both cases). I want the dialog to recenter itself after it is resized.

Please help.

Primefaces 3.5

Upvotes: 2

Views: 1941

Answers (1)

BalusC
BalusC

Reputation: 1109382

When I change to:

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

That's the right solution. Stick to it. You need to update the <p:dialog> itself in order to get it to fit.

after pressing 'ok' the dialog disappears.

Prevent that from happening by checking in dialog's visible attribute if 'ok' button was pressed:

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

Upvotes: 1

Related Questions