title: Primefaces popup dialog not working
body: <p>I have a jsf page having a popup button that opens a following dialog popup:</p>
  
  <pre><code>&lt;/h:form&gt;
  &lt;p:dialog id="dialog" header="Select different user"
          widgetVar="dlg" appendToBody="true"&gt;
  
      &lt;h:form id="form23"&gt;
          &lt;h:panelGrid columns="2" cellpadding="5"&gt;
              &lt;h:outputLabel for="username" value="Username:" /&gt;
              &lt;p:inputText value="#{loginBean.username}" 
                  id="username" required="true" label="username" /&gt;
  
              &lt;h:outputLabel for="password" value="Password:" /&gt;
              &lt;h:inputSecret value="#{loginBean.password}" 
                  id="password" required="true" label="password" /&gt;
  
              &lt;f:facet name="footer"&gt;
                  &lt;p:commandButton id="loginButton" value="Login" /&gt;
              &lt;/f:facet&gt;
          &lt;/h:panelGrid&gt;
      &lt;/h:form&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>But instead of opening as popup it is getting displayed outside the page itself. the dialog is outside the main form. Help!!</p>
  
  <hr>
  
  <p>I tried that but still the same problem persists..below is my modified code..</p>
  
  <pre><code>&lt;h:form id="create-ticket"&gt;
      &lt;p:dialog id="dialog" header="Select different user" widgetVar="dlg" appendToBody="true"&gt;
  
      &lt;h:panelGrid columns="2" cellpadding="5"&gt;
          &lt;h:outputLabel for="username" value="Username:" /&gt;
          &lt;p:inputText value="#{loginBean.username}" 
                  id="username" required="true" label="username" /&gt;
  
          &lt;h:outputLabel for="password" value="Password:" /&gt;
          &lt;h:inputSecret value="#{loginBean.password}" 
                  id="password" required="true" label="password" /&gt;
  
          &lt;f:facet name="footer"&gt;
              &lt;p:commandButton id="loginButton" value="Login" 
                  /&gt;
          &lt;/f:facet&gt;
      &lt;/h:panelGrid&gt;
  
   &lt;/p:dialog&gt;
       &lt;h:panelGroup&gt;
       &lt;h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header"&gt;&lt;/h:outputLabel&gt;
      &lt;/h:panelGroup&gt;
      &lt;h:panelGroup id="search_section" layout="block"
         styleClass="atf-content-area atf-separarot-botton"&gt;   &lt;!-- This is the section where we get the grey background --&gt;
           &lt;h:panelGroup id="input_search_section" styleClass=""&gt;
              &lt;h:outputText id="name" value="Siddharth Mishra"    
              labelStyleClass="atf-label"&gt;
              &lt;/h:outputText&gt;
          &lt;/h:panelGroup&gt;
      &lt;h:panelGroup styleClass="atf-right atf-inline-block"&gt;
          &lt;p:commandButton id="btn_search" value="select different user"
              styleClass="atf-button-search" onclick="dlg.show();" type="button"
              &gt;
  
          &lt;/p:commandButton&gt;
      &lt;/h:panelGroup&gt;
  
  &lt;/h:panelGroup&gt;
  </code></pre>
  
  <p>Now i only have one form you can see the popup dialog section + the button which is calling the popup under h:panelgroup.Atached is the image how the form currently looks Thanks in advance<img src="https://i.stack.imgur.com/GeAp9.jpg" alt="enter image description here"></p>