title: Primefaces dialog glued to right screen border after resize
body: <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>