tags:

views:

193

answers:

1

I have three drop down list <h:selectOneMenu>, and a <p:dataTable>. I want the three drop down list to be side by side with the dataTable. As I have right now, The three drop down lists are above the dataTable. I try to create bigger table and put the three drop down lists in one column, and put <h:dataTable> in another column to get the side by side layout, but it does not work. Here is what I got so far

        <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>
+1  A: 

Two ways:

  1. Create a h:panelGrid and put the dropdowns in one h:panelGroup. The h:panelGrid renders a HTML <table> element with each child in its own <td> element.

    <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. Wrap the dropdowns in a <h:panelGroup layout="block">, it will render a HTML <div> element. Then apply CSS float:left; on both the <h:panelGroup> and the <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>
    

    with

    .left { float: left; }
    
BalusC
I used your first method. And it works. However, when it generate the second <td> element for the <dataTable>, the <dataTable> is align center inside the <td> cell, make it look funny. Is there a way that I can make both of the <td> to align top?, I try to use `<h:panelGrid columns="2" style="vertical-align: top">`, but it does not work
Harry Pham
Check the generated HTML output. It's applying the style on the `table` rather than the `td`. Give it a classname and use `.classname td { vertical-align: top; }` in CSS.
BalusC