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.