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.
 
    