Problema con la disposición de la tabla
-
01-10-2019 - |
Pregunta
Tengo tres lista desplegable <h:selectOneMenu>
, y una <p:dataTable>
. Quiero la lista de abajo tres gota a estar al lado de la dataTable. Como tengo en este momento, las tres listas desplegables están por encima del dataTable. Intento crear mesa más grande y poner las tres listas desplegables en una columna, y poner <h:dataTable>
en otra columna para obtener el uno al lado del diseño lateral, pero no funciona. Esto es lo que tengo hasta ahora
<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>
Solución
Dos maneras:
-
Crear un
h:panelGrid
y poner los menús desplegables en unah:panelGroup
. Elh:panelGrid
hace que un elemento HTML<table>
con cada niño en su propio elemento<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>
-
Wrap los menús desplegables en una
<h:panelGroup layout="block">
, va a proporcionar un elemento<div>
HTML. A continuación, aplicarfloat:left;
CSS tanto en el<h:panelGroup>
y la<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>
con
.left { float: left; }