Вопрос
У меня есть три выпадающих списка <h:selectOneMenu>
, и а <p:dataTable>
. Отказ Я хочу, чтобы три выпадающих списка были рядом с DataTable. Как я имею прямо сейчас, три выпадающих списка выше DataTable. Я пытаюсь создать большую таблицу и поставить три выпадающих списка в одном столбце и поставить <h:dataTable>
В другом столбце, чтобы получить бок о боковой макете, но он не работает. Вот что я получил до сих пор
<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>
Решение
Два пути:
Создать
h:panelGrid
и положить раскрывающиеся в одинh:panelGroup
. Отказ Тоh:panelGrid
делает HTML<table>
элемент с каждым ребенком самостоятельно<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>
Оберните выпадающие в
<h:panelGroup layout="block">
, он будет представлять HTML<div>
элемент. Затем нанесите CSSfloat:left;
на обоих<h:panelGroup>
и то<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>
с участием
.left { float: left; }