Search code examples
javascripthtmlcssrichfacesmyfaces

RichFaces extendedDataTable scrollbars don't show up until after screen resize

I'm using richFaces 4.5.17, and I'm trying to use an extendedDataTable. When I first load the page, the data that is displayed is too large and should result in an extended data table that shows a scrollbar. However, the actual result is just a window that only shows maybe 4 rows. Additionally, no headers are shown in the data table.

If you resize the browser window at all, making it larger or smaller even by 1px, the scrollbars suddenly show up and the headers pop up.

While there is a workaround for users, it's a major flaw that a user has to resize their window every time they refresh the page.

The headers were being shown with a generated height of 0, but I was able to get the headers to show by modifying my styles.css page to include:

.rf-edt-hdr-c{
    height:45px !important;
}

A snippet of the code from my page is:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core" lang="en">
<h:head></h:head>
<h:body>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:t="http://myfaces.apache.org/tomahawk"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j" >

    <t:panelGroup>
        <rich:collapsiblePanel header="Reverts:" headerClass="textLeft" switchType="ajax" >

            <rich:extendedDataTable id="listReverts" value="#{accountingBacking.reverts}" var="revert"  columnClasses="textCenter, textCenter,textRight, textLeft,textCenter, textLeft"
                sortMode="single" first="0" frozenColumns="1" style="width:830px;height:100px;">

                <rich:column sortBy="#{revert.tranDate}">
                    <f:facet name="header">
                        <h:outputText value="Tran Date" />
                    </f:facet>
                    <a4j:commandLink  render="accountDetailForm" action="#{accountingBacking.loadRevertTransaction}" onclick="#{rich:component('popAccountTranDetail')}.show()" onmouseover="Tip('#{msg_bundle.account_loadDetail_help}')">

                        <a4j:param name="tranid" value="#{revert.tranid}" assignTo="#{accountingBacking.tranId}" />                         
                        <h:outputText value="#{revert.tranDate}">
                            <f:convertDateTime type="date" pattern=" MM/dd/yyyy" />
                        </h:outputText>
                    </a4j:commandLink>
                </rich:column>

                <rich:column sortable="false">
                    <f:facet name="header">
                        <h:outputText value="Org" />
                    </f:facet>
                    <h:outputText value="#{revert.org}" />
                </rich:column>
            </rich:extendedDataTable>
        </rich:collapsiblePanel>
    </t:panelGroup>
</ui:composition>
</h:body>
</html>
Solution

  • The answer ended up being in the version.

    I ended up utilizing 4.5.10 to preserve my site functionality while avoiding the bug introduced in 4.5.17

    In the final version of RichFaces 4.5.17 there is a bug that is preventing the javascript from automatically and dynamically rendering the scrollbars. The solution was to back the version up enough that I did not encounter the same error, while at the same time avoiding many of the other known bugs as described in the release notes https://developer.jboss.org/people/michpetrov/blog/2016/06/22/richfaces-4517final-release-announcement