How to wrap headers of prime faces tree table?

Question

I am using prime faces 5.3. I am making my pages responsive. I am using class="ui-fluid". I couldn't wrap headers of tree table though columns are properly wrapped. Following technique is working for data table. But it is not working for tree table. My xhtml page is as follows

    <?xml version="1.0" encoding="UTF-8" ?>
<ui:define name="head">
        <style type="text/css">
        /** This css will be used for wrapping multi word(both space and non space) into next line **/
            wrap {
                white-space: normal;
                word-wrap: break-word;
             }


        </style>
    </ui:define>

<div class="ui-fluid">
    <p:tabView id="tabviewid" value="#{mplsXcListController.listOfTabs}" var="eachTabTitle" 
        activeIndex="#{mplsXcListController.activeTab}" scrollable="true">   
        <p:ajax event="tabChange" listener="#{mplsXcListController.tabChangeCallBack}"/>
        <p:tab id="tab_#{eachTabTitle}" title="${eachTabTitle}">
        <h:form name="tabForm">

    <p:panelGrid id="filter" columns="10" layout="grid" style="width:100%" styleClass="ui-fluid">

        ..........

    </p:panelGrid>
    <!-- <br></br> -->
    <h:panelGrid border= "0" id="entryPage" columns="8" layout="grid" style="width: 100%;" columnClasses="ui-grid-col-1,ui-grid-col-2, ui-grid-col-1 alignmentRight,ui-grid-col-1,ui-grid-col-1,ui-grid-col-2,ui-grid-col-1,ui-grid-col-2" styleClass="ui-fluid">
        <p:commandButton id="prevFilter" value="${messages.lbPrevEntry}" 
            title="${messages.mPrevEntry}" ajax="false" 
            disabled="${mplsXcListController.isPrevFilterDisabled()}"
            action="${mplsXcListController.prevMplsXcEntryList()}"
            update="filterlineName filterNEName tmFilter tabviewid filterCount filterPage"/>

        ...........
    </h:panelGrid>

            <p:treeTable id="mplsxctt" emptyMessage="${messages.noRecordFound}" var="item" value="${mplsXcListController.constituteTabFilteredDataList(eachTabTitle)}"
                 resizableColumns="true" liveResize="false" selectionMode="checkbox" selection="#{mplsXcListController.getTabData(eachTabTitle).selectedNodes}" sortMode="multiple" styleClass="wrap">

                <p:ajax event="select" listener="#{mplsXcListController.getTabData(eachTabTitle).onNodeSelect}"/>
                <p:ajax event="unselect" listener="#{mplsXcListController.getTabData(eachTabTitle).onNodeUnselect}"/>

                <p:column headerText="${messages.colLineName}" style="text-align:left;" styleClass="wrap"
                    sortBy="#{item.lineName}" >
                    <h:outputText rendered="${item.lineMainNode=='branchNode'}" value="#{item.lineName}" />
                    <h:outputText rendered="${item.lineMainNode=='mainNode'}" style="font-weight: bold;text-align: left;" value="#{item.lineName}" />
                </p:column>

                <p:column headerText="${messages.colServCapacity}" style="text-align:left;" styleClass="wrap" priority="3">
                    <h:outputText value="#{item.serviceCapacityDisplay}" />
                </p:column>
                .......................

            </p:treeTable>
            </h:form>
        </p:tab>        
    </p:tabView>


</div>
</ui:define>
</ui:composition>

Possible duplicate of [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) — Kukeltje, Apr 10 '19 at 05:48

score 1 · Answer 1 · answered Oct 05 '17 at 12:31

1

You have to override the css white-space attribute, use this:

.wrap {
    white-space: normal!important;
    word-wrap: break-word;
}

answered Oct 05 '17 at 12:31

Ouerghi Yassine

1,835
7
43
72

Are you sure you have "." before "wrap"? `.wrap` I have tried the code and its working for me. – Ouerghi Yassine Oct 06 '17 at 10:05
My code is working fine for data table when I separated header using p:columnGroup type="header". But for tree table headers are not wrapped though values are properly wrapping. Please let me know if you successfully wrapped header of primefaces(5.3) treetable or not? – Pal Chakraborty Oct 06 '17 at 11:50

score 0 · Answer 2 · answered Oct 13 '17 at 06:00

        For wrapping headers in data table, I also used column group like following`
<ui:define name="head">
                <style type="text/css">

                /** This css will be used for wrapping multi word(both space and non space) into next line **/

                    .wrap {
                        white-space: normal;
                        word-wrap: break-word;
                     }

                </style>
            </ui:define>
        <p:columnGroup type="header">
                          <p:row>
                            <p:column headerText="${messages.colPhyLineName}" style="text-align:left; white-space:normal; word-wrap:break-word;" sortBy="#{item.phyLineName}" sortFunction="#{stringHandling.numericSortOfString}"/>                    
                          </p:row>
        </p:columnGroup>
       <p:column 
                style="text-align: left; " styleClass="wrap"  >
                <h:outputText value="#{item.phyLineName}" />
       </p:column>

    For treetable, I have to override default treetable css

    <style type="text/css">

    <!-- This css has been overriden so that headers of tree tables wrap properly if screen size is small.
     This is done locally as original behaviour may be required for some usecase
     -->

    .ui-treetable thead th {
        white-space: normal;
        word-wrap: break-word;
    }

    </style>

score 0 · Answer 3 · answered Apr 09 '19 at 20:42

Try this:

<ui:define name="head">
    <style type="text/css">
       .ui-state-default 
        {
          white-space: normal !important;
          word-wrap: break-word !important;
        }
    </style>

Remove styleClass for the treeTable. I hope this help you.

How to wrap headers of prime faces tree table?

3 Answers3