column width in rich:datatable

问题

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?

回答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}

回答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.

回答3:

use:

style="width:150px"

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

.myColumnClass{
 width: 150px;
}

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

来源：https://stackoverflow.com/questions/3512682/column-width-in-richdatatable

标签

css

richfaces

jsf-2