いくつかのテストデータを含むデータテーブルを作成しました。私の問題は、いくつかの値が私の列の1つに対して大きすぎるため、奇妙なレイアウトにつながることです。
(注文列の後に、他の2つの列が表示されます)
私はすでにいくつかのことを試しました:
<p:column headerText="Orders" width="50">
変更なし<p:column headerText="Orders" style="max-width: 30px;">
列を小さくしますが、値は30px後にカットされます<br/>
ブレークラインを強制するためにいくつかの数字の後に追加しますが、変更はありません
注文値は1つの大きな文字列です。私の目標は、orders列を、文字列値が分割される複数行の列に変更することです。
私のデータテーブルコード:
<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>
他のスレッドでは、cssを使用した解決策を見つけましたが、それも機能しませんでした(理由は、cssファイルとメソッドを作成する方法と場所がわからないためである可能性があります)。