JSF rich:datatable column display very long text in multiple lines

Question

I have a richdatatable in jsf .xhtml page . I have a very long text for a particular cell. How can i set the width of the column and also display the text within the specified cell. I am new to JSF and CSS. I am providing an example. Suppose I have two columns in a richdatatable and one of them have a very long text. I want that very long text to get displayed in lines(wrap text) rather than in a single line. I m not sure where, how and what to put as part of CSS

<ui:composition template="/template.xhtml">
    <ui:define name="title">
        <h:outputText value="#{bundle.ViewFileTitle}"></h:outputText>
    </ui:define>
    <ui:define name="body">
    <h:form>
            <rich:dataTable value="#{fileController.feedbackFileItems}" var="item" id="table">
                    <rich:column>
                       <f:facet name="header">
                            <h:outputText value="#{bundle.ListFeedbackTitle_feedbackPK_feedbackId}"/>
                        </f:facet>
                        <h:outputText value="#{item.feedbackPK.feedbackId}"/>
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{bundle.ListFeedbackTitle_department}"/>
                        </f:facet>
                        <h:outputText value="#{item.department}"/>
                    </rich:column>
            </rich:dataTable>
            </h:form>
    </ui:define>
</ui:composition>

Could you please try demonstrating with relevant example(s) - [MCVE](http://stackoverflow.com/help/mcve)? — Tiny, Dec 21 '14 at 19:19

Vasil Lukach · Accepted Answer · 2014-12-28T01:02:38.570

For displaying long text in multiple line you can use width attribute of rich:column:

<rich:column width="150" ...>

or the same for h:column:

<h:column width="110">

If you don't want to display text of datatable cell in multiple lines, then
1) you can use columnClasses attribute of rich:dataTable and specify no-wrap style for that column. For example combination

<rich:dataTable columnClasses="nowrap,">

with CSS

.nowrap {
    white-space: nowrap;
}

will be resulted as table with non wrapped first column.

2) You can use style or styleClass attributes of rich:column for the same result (with the same CSS).

JSF rich:datatable column display very long text in multiple lines

1 Answers1