プライムフェイスツリーテーブルのヘッダーをラップするにはどうすればよいですか？

Question

私は素顔を使用しています。私はページを反応的にしています。私はclass = "ui-fluid"を使用しています。列は適切にラップされていますが、私はツリーテーブルのヘッダーをラップできませんでした。以下のテクニックはデータテーブルのために働いています。しかし、ツリーテーブルでは機能しません。あなたは、CSS white-space属性をオーバーライドする必要が

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

を次のように私のXHTMLページがあり、これを使用する：

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