JSF PrimeFaces DataTable布局

Question

请帮助解决JSF PrimeFaces 3.5和Accordion Panel的布局问题。

下面是未使用AccordionPanel的屏幕截图：DataTable，一些特殊输入。

现在让我使用AccordionPanel并放置DataTable。 现在DataTable的布局已损坏。

附于AccordionPanel情况下此处的源代码：

<p:accordionPanel activeIndex="-1" id="dsAccordionPanelMain" multiple="true" dynamic="true"> 
<p:tab title="Data source" rendered="true"> 
    <h:dataTable value="#{treeBean.selectedDataSourceProps}" var="dataPropertyCurrent" id="propsDataTable" 
     styleClass="custom-data-table" 
     headerClass="custom-data-table-header" 
     rowClasses="custom-data-table-odd-row,custom-data-table-even-row" 
    > 
     <h:column> 
      <f:facet name="header">Label</f:facet> 
      #{dataPropertyCurrent.label} 
     </h:column> 

     <h:column> 
      <f:facet name="header">Diapasone (min-max) or pattern</f:facet> 
      <p:panel rendered="#{dataPropertyCurrent.type == 'dateTime'}"> 
       <p:calendar value="#{dataPropertyCurrent.diapasone.min}" disabled="#{dataPropertyCurrent.editableDiapasone}" 
        pattern="MM/dd/yyyy HH:mm" 
        mindate="#{dataPropertyCurrent.diapasone.min}" maxdate="#{dataPropertyCurrent.diapasone.max}"/> 
       - 
       <p:calendar value="#{dataPropertyCurrent.diapasone.max}" disabled="#{dataPropertyCurrent.editableDiapasone}" 
        pattern="MM/dd/yyyy HH:mm" 
        mindate="#{dataPropertyCurrent.diapasone.min}" maxdate="#{dataPropertyCurrent.diapasone.max}"/> 
      </p:panel> 

      <p:panel rendered="#{dataPropertyCurrent.type == 'string'}"> 
       <h:inputText value="#{dataPropertyCurrent.diapasone.min}" disabled="#{dataPropertyCurrent.editableDiapasone}"/> 
       - 
       <h:inputText value="#{dataPropertyCurrent.diapasone.max}" disabled="#{dataPropertyCurrent.editableDiapasone}"/> 
      </p:panel> 

      <p:panel rendered="#{dataPropertyCurrent.type == 'decimal'||dataPropertyCurrent.type == 'gYear'}"> 
       <h:panelGrid columns="1" style="margin-bottom:4px"> 
        <h:outputText id="displayRange" value="Between #{dataPropertyCurrent.diapasone.min} and #{dataPropertyCurrent.diapasone.max}"/> 
        <p:slider for="txt6,txt7" display="displayRange" style="width:400px" range="true" 
          minValue="#{dataPropertyCurrent.diapasone.min}" maxValue="#{dataPropertyCurrent.diapasone.max}" 
          displayTemplate="Between {min} and {max}"/> 
       </h:panelGrid> 
       <h:inputHidden id="txt6" value="#{dataPropertyCurrent.diapasone.min}" /> 
       <h:inputHidden id="txt7" value="#{dataPropertyCurrent.diapasone.max}" /> 
      </p:panel> 

      <p:panel rendered="#{dataPropertyCurrent.type == 'double'}"> 
       <p:spinner value="#{dataPropertyCurrent.diapasone.min}" stepFactor="#{(dataPropertyCurrent.diapasone.max- dataPropertyCurrent.diapasone.min)/100}" 
        min="#{dataPropertyCurrent.diapasone.min}" max="#{dataPropertyCurrent.diapasone.max}" disabled="#{dataPropertyCurrent.editableDiapasone}" 
        onkeypress="return false;"/> 
       - 
       <p:spinner value="#{dataPropertyCurrent.diapasone.max}" stepFactor="#{(dataPropertyCurrent.diapasone.max- dataPropertyCurrent.diapasone.min)/100}" 
        min="#{dataPropertyCurrent.diapasone.min}" max="#{dataPropertyCurrent.diapasone.max}" disabled="#{dataPropertyCurrent.editableDiapasone}" 
        onkeypress="return false;"/> 
      </p:panel> 
     </h:column> 
     <h:column> 
      <f:facet name="header">Join options</f:facet> 
      <p:commandButton id="joinBtn" value="Basic" type="button" disabled="#{dataPropertyCurrent.notJoinable}"/> 
      <p:overlayPanel id="joinPanel" for="joinBtn" > 
        <f:facet name="header">Details In Tree</f:facet> 
        <h:outputLabel value="Joinable" /> 
        <h:outputLabel value="#{dataPropertyCurrent.joinableText}" /> 
      </p:overlayPanel> 
     </h:column> 
    </h:dataTable> 
    <br/> 
    <br/> 
    </p:tab> 
</p:accordionPanel> 

Answer 1

由于@Jitesh，解决方法是在CSS列使用whitespace:nowrap，这里的详细信息：How to show 2 line in one column in datatable?