4 Replies Latest reply on Jan 29, 2010 5:30 AM by satish kumar

    how to wrap column headers in <rich:table>

    satish kumar Newbie

      Hi,

      I want to wrap column headers in rich:table.(I'm using rich faces 3.3.2 version)

      I tried setting the columnswidth attribute in <rich:table>, but doesn't seem to work.

      I even tried over wrinting the default css for columns as show below

       

      <style type="text/css">
      .rich-table-subheadercell {
          border-right: 1px solid #C0C0C0;
          color: #000000;
          font-family: Arial, Verdana, sans-serif;
          font-size: 10px;
          padding: 2px;
          text-align: center;
          white-space: wrap;
      }
      </style>

       

      Added the above css in <rich:column headerClass="rich-table-subheadercell">

       

      But nothing worked for, now i'm stuck up with this.

       

      I would be glad if anyone can help me out with this.

       

      Thanks in advance

       

      Regards,

      Satish Kumar

        • 1. Re: how to wrap column headers in <rich:table>
          Ilya Shaikovsky Master
          please share the screenshot with problem.
          • 2. Re: how to wrap column headers in <rich:table>
            satish kumar Newbie

            Hi,

            attached are the sample screen shots(first screen shot is the problem and second is the solution, which i did through firebug) and the code for the same is as follows

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j">
            <head>
            <style type="css">
            .rich-table-subheadercell {
            border-right:1px solid #C0C0C0;
            color:#000000;
            font-family:Arial,Verdana,sans-serif;
            font-size:10px;
            padding:1px;
            text-align:center;
            }
            .rich-table {
            border-collapse:collapse;
            empty-cells:show;
            }

             

            </style>
            </head>
            <body>
            <h:form>
                <rich:panel style="width:650px;">
                    <rich:dataTable columns="16" style="width:600px;">
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines Name</f:facet>
                            <h:outputText >Satish Air</h:outputText>
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines No</f:facet>
                            <h:outputText value="1234567" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines Name</f:facet>
                            <h:outputText value="Satish Air" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines No</f:facet>
                            <h:outputText value="1234567" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines Name</f:facet>
                            <h:outputText value="Satish Air" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines No</f:facet>
                            <h:outputText value="1234567" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines Name</f:facet>
                            <h:outputText value="Satish Air" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines No</f:facet>
                            <h:outputText value="1234567" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines Name</f:facet>
                            <h:outputText value="Satish Air" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines No</f:facet>
                            <h:outputText value="1234567" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines Name</f:facet>
                            <h:outputText value="Satish Air" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines No</f:facet>
                            <h:outputText value="1234567" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines Name</f:facet>
                            <h:outputText value="Satish Air" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines No</f:facet>
                            <h:outputText value="1234567" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines Name</f:facet>
                            <h:outputText value="Satish Air" />
                        </rich:column>
                        <rich:column headerClass="rich-table-subheadercell">
                            <f:facet name="header">Airlines No</f:facet>
                            <h:outputText value="1234567" />
                        </rich:column>
                    </rich:dataTable>
                </rich:panel>
            </h:form>
            </body>
            </html>

             

             

            The basic problem here is, column headings are lengthier than actuall data and total 17 columns. so the screen is not looking good.

            if i can wrap the column headers then it will solve the problem.

             

            Please let me know if you need anf info.

            • 3. Re: how to wrap column headers in <rich:table>
              Ilya Shaikovsky Master
              <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:a4j="http://richfaces.org/a4j"
                    xmlns:rich="http://richfaces.org/rich">
                             
              <style>
              .rich-table-subheadercell {
                  white-space: normal;
                  }
              </style>     
                   <h:form id="myform">
                      <rich:dataTable columns="16" style="width:600px;">
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines Name</f:facet>
                              <h:outputText >Satish Air</h:outputText>
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines No</f:facet>
                              <h:outputText value="1234567" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines Name</f:facet>
                              <h:outputText value="Satish Air" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines No</f:facet>
                              <h:outputText value="1234567" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines Name</f:facet>
                              <h:outputText value="Satish Air" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines No</f:facet>
                              <h:outputText value="1234567" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines Name</f:facet>
                              <h:outputText value="Satish Air" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines No</f:facet>
                              <h:outputText value="1234567" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines Name</f:facet>
                              <h:outputText value="Satish Air" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines No</f:facet>
                              <h:outputText value="1234567" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines Name</f:facet>
                              <h:outputText value="Satish Air" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines No</f:facet>
                              <h:outputText value="1234567" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines Name</f:facet>
                              <h:outputText value="Satish Air" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines No</f:facet>
                              <h:outputText value="1234567" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines Name</f:facet>
                              <h:outputText value="Satish Air" />
                          </rich:column>
                          <rich:column headerClass="rich-table-subheadercell">
                              <f:facet name="header">Airlines No</f:facet>
                              <h:outputText value="1234567" />
                          </rich:column>
                      </rich:dataTable>
                   </h:form>
              </ui:composition>
              
              • 4. Re: how to wrap column headers in <rich:table>
                satish kumar Newbie

                hurray, it worked.

                you made my day!!

                 

                Thank You!!