cssjsfjsf-2richfacesrichdatatable

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


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>

Solution

  • 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).