column width in rich:datatable

Question

How to set the colum width for a rich:column inside a rich:datatable ? The width attribute is being 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 render this column and veryLongText is wider than 150px it does not break it in multiple lines. Instead, it just ignores the column width and takes as much as space needed.

How to fix this?

Answer 1

Try the <rich:column> 's headerClass attribute, as so:

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

Then, in your CSS (embedded or linked):

.myWidth {width:150px}

You may also have some contravening "white-space" CSS property coming into play somewhere, so you might want to specify the .myWidth selector as so:

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

Answer 2

If you want to achieve columns with word-wrap use this one....

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

It is tested on both Mozilla and IE 8.0.

Answer 3

use:

style="width:150px"

or styleClass="myColumnClass" where you add in 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>