rich:dataTable headerClass attribute issue

Question

We are upgrading from jsf 1.2 to jsf 2. We are using apache myfaces 2.1 and rich faces 4.3.

The issue is headerClass attribute seems to be not working for rich:dataTable. Following is the xhtml code

.class2{
 border: 1px solid #000;

}

.class1{
      text-align:left;
      color:#000;
      font-weight:normal;
}




<rich:dataTable value="#{bean.quns}" var="quns" headerClass="class1" columnClasses="class2">

                            <f:facet name="header">
                                    <h:outputText value="User Name : #{bean.userName}"/>    
                                </f:facet>

                             <rich:column>                      
                                    <h:panelGrid id="qns#{index+1}" columns="2">

                                                <h:outputText value="qns #{index+1}"/>
                                                <h:selectOneMenu value="#{quns.question}">
                                                <f:selectItems value="#{bean.questionPool}" />
                                         </h:selectOneMenu> 

                                                 <h:outputText value="Answer"/>
                                     <h:inputText value="#{quns.answer}"/>



                                            </h:panelGrid>    
                              </rich:column>
        </rich:dataTable>

The columnclasses attribute is working perfectly fine. When rich:dataTable built in css style for table header cell is modified like below :

.rf-dt-hdr-c{
      text-align:left;
      color:#000;
      font-weight:normal;
}

header class works perfectly fine indicating that default style sheet is overwriting explicit one. How can headerClass styleClass will be made to work ?

Can anyone please help ?

L-Ray L-Ray · Accepted Answer · 2013-12-18T10:04:08

When you investigate the rendered XHTML-code, you will recognize

the headerClass content is added to the tr of the header row
the columnClassES content is, tokenized by space, added to the appropriate columns td

To have the commands of your class1 CSS on the same layer like rf-dt-hdr-c, just change the CSS definition to

.class1 th {
  text-align:left;
  color:#000;
  font-weight:normal;
}

Hope it helps...

rich:dataTable headerClass attribute issue

1 Answers