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

how to wrap column headers in <rich:table>

sathish1712 Jan 29, 2010 1:42 AM

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

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 Jan 29, 2010 3:50 AM (in response to sathish1712)

please share the screenshot with problem.
Actions
2. Re: how to wrap column headers in <rich:table>

sathish1712 Jan 29, 2010 4:06 AM (in response to ilya_shaikovsky)
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.

column header1.JPG 74.9 KB

column header.JPG 75.1 KB
Actions

3. Re: how to wrap column headers in <rich:table>

ilya_shaikovsky Jan 29, 2010 5:04 AM (in response to sathish1712)

<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>

sathish1712 Jan 29, 2010 5:30 AM (in response to ilya_shaikovsky)

hurray, it worked.
you made my day!!

Thank You!!
Actions

Go to original post