title: How align this selectOneMenu
body: <p>How to align this selectOneMenu?
  I have the same problem in other pages.</p>
  
  <p><a href="https://i.stack.imgur.com/Vpwdx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vpwdx.png" alt="image"></a></p>
  
  <p>Code:</p>
  
  <pre><code>&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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:namespace="http://java.sun.com/jsf/composite/namespace"
      xmlns:sec="http://www.springframework.org/security/facelets/tags"&gt;
  &lt;!-- 
          Replace path to template, title, header and body
          with actual data.
       --&gt;
  &lt;ui:composition template="Template.xhtml"&gt;
      &lt;ui:define name="content"&gt;
          &lt;div class="content_wrapper"&gt;
              &lt;div class="content"&gt;
                  &lt;sec:ifAnyGranted roles="ROLE_ADMINISTRADOR,ROLE_USUARIO,ROLE_GERENCIADOR"&gt;
  
                      &lt;h:form id="formGrid"&gt;
                      Data Inicial: &lt;p:calendar id="popup" value="#{relatorioHistoricoMB.dataInicial}" /&gt;
                      Data Final: &lt;p:calendar id="popup2" value="#{relatorioHistoricoMB.dataFinal}" /&gt;
                      &lt;p:selectOneMenu value="#{relatorioHistoricoMB.reservatorio.idReservatorio}"
                          style="width:170px" required="true"
                          requiredMessage="Selecione algum."&gt;
                          &lt;f:selectItem itemLabel="Selecione o Reservatório" itemValue="0" /&gt;
                          &lt;f:selectItems value="#{relatorioHistoricoMB.listaReservatorio}"
                              var="reservatorio" itemLabel="#{reservatorio.nomeReservatorio}"
                              itemValue="#{reservatorio.idReservatorio}" /&gt;
                      &lt;/p:selectOneMenu&gt;
                      &lt;p:commandButton value="Gerar relatório" update="formGrid"
                          actionListener="#{relatorioHistoricoMB.executar}" /&gt;
  
                          &lt;p:dataTable id="Grid" var="historico"
                              value="#{HistoricoBean.listaHistorico}"
                              selection="#{HistoricoBean.historico}" selectionMode="single"
                              rowKey="#{historico.idHistorico}" paginator="true" rows="5"&gt;
                              &lt;f:facet name="header"&gt;
                                  &lt;h:outputText value="Historico" /&gt;
                              &lt;/f:facet&gt;
                              &lt;p:column headerText="Reservatorio"&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:outputText value="Reservatorio" /&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{historico.reservatorio.nomeReservatorio}" /&gt;
                              &lt;/p:column&gt;
  
                              &lt;p:column headerText="Bomba"&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:outputText value="Bomba" /&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{historico.bomba.nomeBomba}" /&gt;
  
                              &lt;/p:column&gt;
  
                              &lt;p:column headerText="Data"&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:outputText value="Data" /&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{historico.dataHistorico}" /&gt;
                              &lt;/p:column&gt;
  
                              &lt;p:column headerText="Evento"&gt;
                                  &lt;f:facet name="header"&gt;
                                      &lt;h:outputText value="Evento" /&gt;
                                  &lt;/f:facet&gt;
                                  &lt;h:outputText value="#{historico.novoStatusHistorico}" /&gt;
                              &lt;/p:column&gt;
  
                          &lt;/p:dataTable&gt;
                      &lt;/h:form&gt;
                  &lt;/sec:ifAnyGranted&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  &lt;/html&gt;
  </code></pre>