Problème avec la mise en page de table

Question

J'ai trois <h:selectOneMenu> déroulant de liste, et un <p:dataTable>. Je veux les trois liste déroulante en bas d'être côte à côte avec le dataTable. Comme je l'ai en ce moment, les trois listes sont au-dessus du dataTable. Je tente de créer plus grande table et mettre les trois listes dans une colonne, et de mettre <h:dataTable> dans une autre colonne pour obtenir du côté de la mise en page de côté, mais il 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éer un h:panelGrid et mettre les listes déroulantes dans un h:panelGroup. Le h:panelGrid rend un élément <table> HTML 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 menus déroulants dans un <h:panelGroup layout="block">, il va rendre un élément <div> HTML. Ensuite, appliquez CSS float:left; sur les deux <h:panelGroup> et <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; }