scrollableDataTable header height
bwarren Mar 19, 2009 8:03 PMI'm seeing inconsistent behavior between the RichFaces dataTable, extendedDataTable, and scrollableDataTable regarding header row height.
My requirements are that a certain number of left columns and the header row must be scroll locked for horizontal and vertical scrolling. Naturally, scrollableDataTable is the answer...
here is the code I'm looking at:
<rich:dataTable value="#{rtdBackingBean.departureDataModel}" var="row" width="100%"> <rich:column width="45px"> <f:facet name="header"> <h:outputText value="Dest"/> </f:facet> <h:outputText value="#{row.departure.arrivalCity}"/> </rich:column> <rich:column width="45px"> <f:facet name="header"> <h:outputText value="Flight"/> </f:facet> <h:outputText value="#{row.departure.flightNumber}"/> </rich:column> <rich:column width="55px"> <f:facet name="header"> <h:outputText value="ETD"/> </f:facet> <h:outputText value="#{row.departure.departureTime}"> <joda:convertDateTime type="both" pattern="h:mma"/> </h:outputText> </rich:column> <rich:column width="45px"> <f:facet name="header"> <h:outputText value="Gate"/> </f:facet> <h:outputText value="#{row.departure.departureGate}"/> </rich:column> <rich:column width="65px"> <f:facet name="header"> <h:outputText value="Status"/> </f:facet> <h:outputText value="#{row.departure.status}"/> </rich:column> <rich:column width="55px"> <f:facet name="header"> <h:outputText value="Bags"/> </f:facet> <h:outputText value="#{row.departure.unloadedBagCount}(#{row.departure.bagCount})"/> </rich:column> <rich:column width="55px"> <f:facet name="header"> <h:outputText value="Local"/> </f:facet> <h:outputText value="#{row.departure.localConnection.unloadedBagCount}(#{row.departure.localConnection.bagCount})"/> </rich:column> <rich:column width="55px"> <f:facet name="header"> <h:outputText value="Xfer"/> </f:facet> <h:outputText value="#{row.departure.unloadedTransferBagCount}(#{row.departure.transferBagCount})"/> </rich:column> <rich:columns var="arrival" index="index" value="#{rtdBackingBean.departureDataModel.arrivals}" width="65px"> <f:facet name="header"> <h:panelGrid> <h:outputText value="#{arrival.carrier}"/> <h:outputText value="#{arrival.flightNumber}"/> <h:outputText value="#{arrival.origination}"/> <h:outputText value="#{arrival.eta}"> <joda:convertDateTime type="both" pattern="h:mma"/> </h:outputText> <h:outputText value="#{arrival.gate}"/> <h:outputText value="#{arrival.status}"/> </h:panelGrid> </f:facet> <h:outputText value="#{row.connections[index].value}"/> </rich:columns> </rich:dataTable>
Notice the headers for the dynamic columns are panelGrids. Everything looks fine with a dataTable:
http://i77.photobucket.com/albums/j52/screech_bw/dataTable.jpg
Change dataTable to extendedDataTable and everything still looks fine, except the right side of the table gets chopped off and I don't get a horizontal scroll bar at the bottom:
http://i77.photobucket.com/albums/j52/screech_bw/extendedDataTable.jpg
This issue has already been submitted and I want the left column locking behavior anyway, so moving on...
Change the dataTable to scrollableDataTable and I get the desired locking behavior and both scrollbars. However, the header row refuses to resize to the panelGrid's height:
http://i77.photobucket.com/albums/j52/screech_bw/scrollableDataTable.jpg
I've tried doing this:
.rich-sdt-header-row { height: 100%; }
and also manually assigning my own style class with pixel and % height to the table headerClass, columns headerClass, and panelGrid styleClass to no avail. I saw somewhere on here that resizing row height was a known issue on the scrollableDataTable in general.
Anybody know of a workaround or see something I'm doing wrong? This is a showstopper for me.