2 Replies Latest reply on Mar 20, 2009 11:45 AM by Brad Warren

    scrollableDataTable header height

    Brad Warren Novice

      I'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.