Wartości domyślne Szerokość kolumny danych nie działa

Question

Utworzono datatable, który zawiera niektóre dane testowe. Moim problemem jest to, że niektóre wartości są zbyt duże w stosunku do jednego z moich kolumn, które prowadzi do dziwny układ:

(po kolumnie rzędu dwóch innych kolumn powinny być wyświetlane)

Próbowałem już kilka rzeczy oUT:

• <p:column headerText="Orders" width="50"> żadne zmiany
• <p:column headerText="Orders" style="max-width: 30px;"> sprawia smaler kolumny ale wartość jest cięty po 30px
• dodając po kilku liczb a <br/> wymusić linię rozdziału, ale nie zmienia

wartości zamówienia to jeden wielki ciąg. Moim celem jest zmiana kolumny zamówień na wielowierszową kolumnę, w której wartość ciągu jest podzielona.

Mój kod DataTable:

<h:body> 
    <h:head> 
    </h:head> 
    <h:form id="form">   
     <p:dataTable id="customerTable" var="customer" value="#{customerDataTable.allCustomer}" 
     rows="25" paginator="true" emptyMessage="No customer found."> 

       <p:column headerText="Customer ID" style="text-align: center;"> 
       <h:outputText value="#{customer.customerNumber}" /> 
       </p:column> 

       <p:column headerText="Fist Name" style="text-align: center;"> 
       <h:outputText value="#{customer.contactFirstName}" /> 
       </p:column> 

       <p:column headerText="Last Name" style="text-align: center;"> 
       <h:outputText value="#{customer.contactLastName}" /> 
       </p:column> 

       <p:column headerText="Sales Employee Nr." style="text-align: center;"> 
       <h:outputText value="#{customer.employee.employeeNumber}" /> 
       </p:column> 

       <p:column headerText="Orders"> 
       <h:outputText value="#{customer.allOrders}"/> 
       </p:column> 


       <p:column headerText="Payments" style="text-align: center;" > 
        <p:commandButton id="payment_btn" update=":form:p_display" oncomplete="paymentDialog.show()" icon="ui-icon-calculator"> 
        <f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/> 
        </p:commandButton> 
        <p:tooltip for="payment_btn" value="Click to see all payments" showEffect="fade" hideEffect="fade"></p:tooltip> 
       </p:column> 

       <p:column headerText="Contact Data" style="text-align: center;" > 
        <p:commandButton id="contact_btn" update=":form:c_display" oncomplete="contactDialog.show()" icon="ui-icon-home"> 
        <f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/> 
        </p:commandButton> 
        <p:tooltip for="contact_btn" value="Click to see the detailed contact data" showEffect="fade" hideEffect="fade"></p:tooltip> 
       </p:column> 

     </p:dataTable> 
    </h:form>  
    </h:body> 

W innych wątków znalazłem rozwiązania za pomocą CSS, ale to nie działa albo (przyczyną może być to, że ja nie teraz, jak i gdzie plik css i metody powinny być tworzone).

Answer 1

Jeśli chcesz złamać wiersze, możesz użyć CSS. Spróbuj dodać to do Twojego stylu

.ui-datatable td,.ui-datatable th { 
    white-space: normal; 
} 

To nie będzie działać, jeśli nie ma żadnych spacji w tekście, ponieważ przeglądarka nie będzie wiedział, gdzie się przełamać linię, w takim przypadku można skorzystać z następujących WBR tagu, ale ważne jest, aby powiedzieć, że nie jest obsługiwane przez IE

Zobacz także:

• http://www.w3schools.com/tags/tag_wbr.asp

Answer 2

spróbuj dodać to do datatable scrollable="true" zadziałało.