title: Primefaces Dialogs Form Structure
body: <p>I'm using Primefaces for a project and I'm seeing bad results with IE vs chrome/firefox/safari in regards to modal Primefaces dialog windows and I think it has to do with form placement.  In IE these dialogs dont appear, but I can see the transparency.  In chrome/firefox they're fine.  What is the best practice for the below situations:</p>
  
  <blockquote>
    <p>List item base xhtml page that has one form.  This page has several
    links that open up dialogs who have their own ajax submit
    (commandButton, commandLink) events.</p>
  </blockquote>
  
  <p>Should the dialog be located within or outside the base xhtml page's form?<br>
  Should the dialog have its own form?  </p>
  
  <p>Below is an illustration:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;html&gt;
      &lt;ui:composition&gt;
          &lt;ui:define name="content"&gt;
              &lt;h:form id="xyz"&gt;
                  //main page content here, commandButtons, commandLinks...etc
              &lt;/h:form&gt;
              &lt;dc:zoomDialog/&gt;
          &lt;/ui:define&gt;
      &lt;/ui:composition&gt;
  &lt;/html&gt;
  
  &lt;!-- zoomDialog maps to the below --&gt;
  &lt;html&gt;
  &lt;ui:component&gt;
      &lt;h:form id="dialogFrm"&gt; 
          &lt;p:dialog widgetVar="zoomDlg" modal="true" styleClass="dialog dialog2"
                  draggable="false" resizable="false" showEffect="fade"
                  hideEffect="fade"&gt;
              //dialog content here, commandButton, commanLink...etc
          &lt;/p:dialog&gt;
      &lt;/h:form&gt;
  &lt;/ui:component&gt;
  </code></pre>