Problème avec la disposition de la table

Question

J'ai trois liste déroulante <h:selectOneMenu>, et un <p:dataTable>. Je veux que les trois listes déroulantes soient côte à côte avec le dataTable. Comme je l'ai maintenant, les trois listes déroulantes sont au-dessus de la table de données. J'essaie de créer une plus grande table et de mettre les trois listes déroulantes dans une colonne, et mettre <h:dataTable> dans une autre colonne pour obtenir la disposition côte à côte, mais cela ne fonctionne pas. Voici ce que je suis arrivé à ce jour

 <h:selectOneMenu id="customer" value="#{DMBackingBean.customer}"> 
      <f:selectItem itemLabel="Select Customer" itemValue="" /> 
      <f:selectItems value="#{DMBackingBean.customers}"/> 
      <p:ajax actionListener="#{DMBackingBean.handCustomerChange}" update="facility" event="change"/> 
     </h:selectOneMenu> 
     <br/><br/> 
     <h:selectOneMenu id="facility" value="#{DMBackingBean.facility}"> 
      <f:selectItem itemLabel="Select Facility" itemValue=""/> 
      <f:selectItems value="#{DMBackingBean.facilities}"/> 
     </h:selectOneMenu> 
     <br/><br/> 
     <h:selectOneMenu id="project" value="#{DMBackingBean.project}"> 
      <f:selectItem itemLabel="Select Projet" itemValue=""/> 
      <f:selectItems value="#{DMBackingBean.projects}"/> 
     </h:selectOneMenu> 
     <p:dataTable var="item" value="#{DMBackingBean.drawings}" selection="#{DMBackingBean.selectedDrawing}" selectionMode="single"> 
      <p:column> 
       <f:facet name="header"> 
        <h:outputText value="DrawingType"/> 
       </f:facet> 
       <h:outputText value="#{item.drawingType}"/> 
      </p:column> 
      ... 
     </p:dataTable> 

Answer 1

Deux façons:

1. Créez un h:panelGrid et mettre les listes déroulantes dans un h:panelGroup. Le h:panelGrid affiche un élément HTML <table> avec chaque enfant dans son propre élément <td>.

   <h:panelGrid columns="2"> 
       <h:panelGroup> 
        <h:selectOneMenu>...</h:selectOneMenu> 
        <h:selectOneMenu>...</h:selectOneMenu> 
        <h:selectOneMenu>...</h:selectOneMenu> 
       </h:panelGroup> 
       <h:dataTable>...</h:dataTable> 
   </h:panelGrid> 
   

2. Envelopper les listes déroulantes dans un <h:panelGroup layout="block">, il va rendre un élément HTML <div>. Ensuite, appliquez CSS float:left; à la fois sur le <h:panelGroup> et le <h:dataTable>.

   <h:panelGroup layout="block" styleClass="left"> 
       <h:selectOneMenu>...</h:selectOneMenu> 
       <h:selectOneMenu>...</h:selectOneMenu> 
       <h:selectOneMenu>...</h:selectOneMenu> 
   </h:panelGroup> 
   <h:dataTable styleClass="left">...</h:dataTable> 
   

   avec

   .left { float: left; }