title: Dialogs are showing at the bottom of the page
body: <p>I am showing the dialogs at this way in all the views:</p>
  
  <pre><code>&lt;f:view locale="#{loginBB.localeCode}"&gt;
      &lt;ui:insert name="dialogs" /&gt;
      &lt;p:messages autoUpdate="true" closable="true" redisplay="false" /&gt;
      &lt;ui:insert name="content" /&gt;
  &lt;/f:view&gt;
  </code></pre>
  
  <p>But they are showing at the bottom of the page</p>
  
  <p>I have made this changes in all dialogs using CSS:</p>
  
  <pre><code>/* Put the dialogs on the top of the screen. It only works on firefox */
  .ui-dialog {
      position: absolute;
  }
  
  /* Disable scroll on the loading dialog */
  .disable-scroll .ui-dialog-content {
      overflow: hidden;
      width: auto;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/YUOe8.png" alt="enter image description here"></p>
  
  <p>What they are not showing at the top of the screen?</p>
  
  <p><strong>Edit:</strong>
  I removed the CSS styles but dialogs still appearing at the bottom of the page in iPads. Tomorrow I will test this in safari from Mac OS X</p>
  
  <p><strong>This is my styles.css file:</strong></p>
  
  <pre><code>td.right {
      text-align: right;
  }
  
  td.center {
      text-align: center;
  }
  
  table td,table tr {
      vertical-align: top;
  }
  
  .ui-datatable .ui-datatable-data tr,.ui-datatable .ui-datatable-data-empty tr,.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td
      {
      border-color: #C1DFFA;
  }
  
  .odd-row {
      background: #ECF5FE;
  }
  
  .ui-panelgrid tr,.ui-panelgrid td {
      border: none;
  }
  
  .ui-panelgrid td {
      padding: 2px;
  }
  
  .panelgrid-center {
      margin: 0 auto !important;
  }
  
  .ui-inputfield.uppercased {
      text-transform: uppercase;
  }
  
  .ui-inputfield {
      text-transform: uppercase;
  }
  
  .ui-inputfield.no-uppercased {
      text-transform: none;
  }
  
  .ui-selectonemenu {
      width: 144px !important;
  }
  
  .ui-selectonemenu-label {
      font-size: 95%;
      width: 100% !important;
  }
  
  .ui-selectonemenu-panel .ui-selectonemenu-list-item {
      font-size: 95%;
      overflow-x: hidden;
  }
  
  .ui-inputtext {
      width: 137px !important;
  }
  
  .ui-widget {
      font-size: 70%;
  }
  
  .ui-panel {
      float: left;
  }
  
  .ui-outputlabel-rfi {
      color: red;
  }
  
  .ui-outputlabel {
      font-weight: bold;
  }
  
  .ui-menubar {
      background: #C1DFFA;
  }
  
  .ui-panel .ui-panel-content {
      padding: 0;
  }
  
  .ui-datatable thead th,.ui-datatable tbody td,.ui-datatable tfoot td {
      padding: 2px;
  }
  
  .justify-text {
      text-align: justify !important;
  }
  
  .negative-number {
      color: red;
  }
  
  .small-icon {
      height: 15px;
      width: 15px;
  }
  
  .small-inputtext {
      width: 80px !important;
  }
  
  .full-width {
      width: 100%;
  }
  </code></pre>
  
  <p><strong>My template file:</strong></p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:o="http://omnifaces.org/ui" xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
  &lt;f:view contentType="text/html"&gt;
      &lt;h:head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;link href="#{resource['images:favicon.ico']}" rel="shortcut icon"
              type="image/x-icon" /&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(
                  function() {
                      $("div[role='tabpanel']").attr("aria-hidden", "false").attr(
                              "style", "display: block");
                      $("h3[role='tab']").removeClass("ui-corner-all").addClass(
                              "ui-corner-top ui-state-active").find("span").attr(
                              "class", "ui-icon ui-icon-triangle-1-s");
                  });
          &lt;/script&gt;
      &lt;/h:head&gt;
      &lt;h:body&gt;
          &lt;o:importConstants type=" ... Constants 1 ... " /&gt;
          &lt;o:importConstants type=" ... Constants 2 ... " /&gt;
          &lt;h:outputStylesheet library="css" name="styles.css" /&gt;
  
                  ...
  
          &lt;p:panelGrid&gt;
              &lt;p:row&gt;
                  &lt;p:column&gt;
                      ... Here is located the application menu ...
                  &lt;/p:column&gt;
                  &lt;p:column&gt;
                      &lt;f:view locale="#{loginBB.localeCode}"&gt;
                          &lt;ui:insert name="dialogs" /&gt;
                          &lt;p:messages autoUpdate="true" closable="true" redisplay="false" /&gt;
                          &lt;ui:insert name="bodyContent" /&gt;
                      &lt;/f:view&gt;
                  &lt;/p:column&gt;
              &lt;/p:row&gt;
          &lt;/p:panelGrid&gt;
      &lt;/h:body&gt;
  &lt;/f:view&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Example of view:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:o="http://omnifaces.org/ui"
      xmlns:of="http://omnifaces.org/functions"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      template="/WEB-INF/templates/main_template.xhtml"&gt;
      &lt;ui:define name="bodyContent"&gt;
          ... Body components ...
      &lt;/ui:define&gt;
  
      &lt;ui:define name="dialogs"&gt;
          &lt;p:dialog closeOnEscape="true"
              header="Find products" id="products"
              modal="true" position="top" widgetVar="productsWV"&gt;
              &lt;h:form id="productsForm"&gt;
                  &lt;p:focus for="productName" /&gt;
                  &lt;pe:keyFilter for="code" mask="pint" /&gt;
                  &lt;pe:keyFilter for="productName" mask="alpha" /&gt;
                  &lt;f:view locale="#{loginBB.localeCode}"&gt;
                      &lt;p:messages closable="true" /&gt;
                  &lt;/f:view&gt;
                  &lt;p:panelGrid columns="1"&gt;
                      ... Dialog components ...
                  &lt;/p:panelGrid&gt;
              &lt;/h:form&gt;
          &lt;/p:dialog&gt;
      &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p><strong>Chrome is reserving the space of dialogs before the view content:</strong>
  <img src="https://i.stack.imgur.com/HmbRn.png" alt="enter image description here"></p>
  
  <p><strong>Last Edit (Error found)</strong></p>
  
  <p>After adding the <code>styles.css</code> file I have the following peace of code:</p>
  
  <pre><code>&lt;h:form&gt;
      &lt;p:ajaxStatus onerror="loadingDLG.hide(); ajaxErrorDLG.show()"
          onstart="loadingDialog.show()" onsuccess="loadingDLG.hide()"&gt;
      &lt;/p:ajaxStatus&gt;
      &lt;p:dialog closable="false" draggable="false" modal="true"
          resizable="false" showHeader="false" styleClass="disable-scroll"
          widgetVar="loadingDialog"&gt;
          &lt;p:graphicImage value="#{resource['images:loading.gif']}" /&gt;
      &lt;/p:dialog&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>If I remove it from the template, the views and the dialogs are shown perfectly. I don't know how to put it in the template because I need it</p>