如何包装素面树表的标题？

Question

我正在使用素面5.3。我正在使我的页面响应。我正在使用class =“ui-fluid”。虽然列被正确包装，但我无法包装树表的标题。以下技术适用于数据表。但它不适用于树桌。我的xhtml页面如下

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

你必须覆盖css white-space属性，使用这个：

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

Answer 3

试试这个：

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

删除treeTable的styleClass。我希望这对你有帮助。