Comment envelopper les en-têtes de la table arborescente des visages principaux?

Question

J'utilise des faces primaires 5.3. Je rends mes pages sensibles. J'utilise class = "ui-fluid". Je ne pouvais pas envelopper les en-têtes de la table des arbres bien que les colonnes soient correctement emballées. La technique suivante fonctionne pour la table de données. Mais ça ne marche pas pour la table des arbres. Ma page xhtml se présente comme suit

<?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> 

Answer 1

Vous devez remplacer l'attribut css white-space, utilisez ceci:

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

Answer 2

 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>