3 Replies Latest reply on Apr 5, 2011 11:21 AM by iabughosh

    RichFaces4 dataTable + align footer

    Edilmar Alves Expert

      Hi,

       

      Some months ago I wrote this discussion and solved the problem of footer alignment in a dataTable.

      Now, RichFaces4 doesn't work with the footerClass CSS formatting that was fine in RichFaces3.3.3.

      Below is the dataTable 3.3.3 in a production server/blueSky skin:

      dataTableFooterAlign333.jpg

      And this is the dataTable 4.0.0 in my development environment/classic skin:

      dataTableFooterAlign400.jpg

      The footer is formatted using bold text (I didn't configure this) and aligned to center.

       

      The xhtml file is exactily the same. I use the footerClass property to configure footer aligned to right:

       

                  <rich:column width="70px" id="dataPagto" styleClass="alignCenter" footerClass="alignRight">

                    <f:facet name="header"><h:outputText styleClass="headerText" value="#{msgCliente['consTitulos.table.labelDataPagto']}" /></f:facet>

                    <h:outputText value="#{item.dataPagto}"><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText>

                    <f:facet name="footer"><h:outputText value="#{msgGeral['labelTotal']}: " /></f:facet>

                  </rich:column>

                  <rich:column width="70px" id="valorPagto" styleClass="alignRight" footerClass="alignRight">

                    <f:facet name="header"><h:outputText styleClass="headerText" value="#{msgCliente['consTitulos.table.labelValorPagto']}" /></f:facet>

                    <h:outputText value="#{item.valorPagto}"><f:convertNumber minFractionDigits="2"/></h:outputText>

                    <f:facet name="footer">

                      <h:outputText value="#{consTitulosCliente.somaValorPagto}" styleClass="alignRight"><f:convertNumber minFractionDigits="2"/></h:outputText>

                    </f:facet>

                  </rich:column>

      The alignRight config is into a external CSS file:

       

      .alignRight { text-align: right; }