Column width in rich: datatable

Question

How to set column width for rich:column inside a rich:datatable ? The width attribute is ignored. See the following code:

 <rich:column label="#{msg[result]}" width="150px"> <f:facet name="header"> <h:outputText value="#{veryLongText}"/> </f:facet> <h:outputText value="#{someValue}" /> <f:facet name="footer"> <h:outputText value="#{someValue}" /> </f:facet> </rich:column> 

If you create this column and veryLongText has a width of more than 150 pixels, it does not split it into several rows. Instead, it simply ignores the column width and takes up as much space as needed.

How to fix it?

Answer 1

Try the <rich:column> headerClass , like this:

 <rich:column headerClass="myWidth"> ... </rich:column> 

Then in your CSS (inline or linked):

 .myWidth {width:150px} 

Perhaps you might have some kind of conflicting CSS property for white space, so you can specify the .myWidth selector as follows:

 .myWidth {width:150px; white-space:normal!important} 

Answer 2

If you want to get columns using word-wrap, use this ...

 <div style="overflow: hidden;width: 300px;word-wrap: break-word; "> <h:outputText value="#{someValue}" /> </div> 

It has been tested on both Mozilla and IE 8.0.

Answer 3

using:

style="width:150px"

or styleClass="myColumnClass" where you add to your CSS

 .myColumnClass{ width: 150px; } 

Answer 4

you can use this:

 <rich:column width="60px"> <f:facet name="header"> <h:outputText value="#{veryLongText}" /> </f:facet> <div style="overflow:hidden;width:60px"> <h:outputText value="#{someValue}" /> </div> </rich:column>