Pergunta
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>
Solução
Two ways:
Create a
h:panelGrid
and put the dropdowns in oneh:panelGroup
. Theh: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>
Wrap the dropdowns in a
<h:panelGroup layout="block">
, it will render a HTML<div>
element. Then apply CSSfloat: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; }