Databases
StackOverflow2013
Postsdbo
POPrimefaces dialog glued to right screen border after resize
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPrimefaces dialog glued to right screen border after resize
    text
    copied!<p>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).</p> <p>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> <pre class="lang-xml prettyprint-override"><code>&lt;p:dialog id="mainDialogId" widgetVar="mainDialog" modal="true" appendToBody="true" &gt; &lt;p:messages autoUpdate="true" /&gt; &lt;h:form id="mainForm"&gt; &lt;p:panel rendered="#{bean.mode eq 'mode0'}"&gt; &lt;p:selectOneMenu id="mainCombo" value="#{bean.decision}" style="width: 100%;"&gt; &lt;f:selectItem itemLabel="" itemValue="" noSelectionOption="true" /&gt; &lt;f:selectItem id="decision1" itemValue="decision1" itemLabel="decision1" /&gt; &lt;f:selectItem id="decision2" itemValue="decision2" itemLabel="decision2" /&gt; &lt;/p:selectOneMenu&gt; &lt;h:panelGroup style="display:block; text-align:right"&gt; &lt;p:commandButton id="ok" value="ok" actionListener="#{bean.handleDecision()}" update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}" &gt; &lt;/p:commandButton&gt; &lt;p:commandButton id="cancel" value="cancel" oncomplete="mainDialog.hide();" immediate="true" /&gt; &lt;/h:panelGroup&gt; &lt;/p:panel&gt; &lt;/h:form&gt; &lt;h:form id="form1" &gt; &lt;p:panel id="panel1" rendered="#{bean.mode eq 'mode1'}" &gt; &lt;ui:include src="/WEB-INF/contents/content1.xhtml" /&gt; &lt;/p:panel&gt; &lt;/h:form&gt; &lt;h:form id="form2"&gt; &lt;p:panel id="panel2" rendered="#{bean.mode eq 'mode2'}" &gt; &lt;ui:include src="/WEB-INF/contents/content2.xhtml" /&gt; &lt;/p:panel&gt; &lt;/h:form&gt; &lt;/p:dialog&gt; </code></pre> <p>Here's a button that displays the dialog:</p> <pre class="lang-xml prettyprint-override"><code>&lt;p:commandButton value="Go" action="#{bean.prepare()}" update=":#{p:component('mainDialogId')}" oncomplete="mainDialog.show()" /&gt; </code></pre> <p>When I change:</p> <pre class="lang-xml prettyprint-override"><code>update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}" </code></pre> <p>to:</p> <pre class="lang-xml prettyprint-override"><code>update=":#{p:component('mainDialogId')}" </code></pre> <p>after pressing 'ok' the dialog disappears.</p> <p>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.</p> <p>Please help.</p> <p>Primefaces 3.5</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload