Я использую datatable для отображения всех записей в простых лицах. И в этой таблице данных у меня 12 столбцов. Все эти столбцы располагаются в одинаковых строках, и из-за этой горизонтальной прокрутки активируется и отвлекает вид экрана.
Код для ввода данных ::
<p:dataTable id="reqActList" paginatorAlwaysVisible="true"
var="reqInfo" value="#{reqSummaryHandler.certActListModel}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
paginator="true" rows="#{label.accountList_defaultNumberOfRows}"
rowsPerPageTemplate="#{label.accountList_numberOfRows}" width="60%">
<!--Columns are define here -->
<p:column style="text-align:center;" width="5%">
<f:facet name="header">
<h:outputLabel value="Select" />
</f:facet>
<h:selectBooleanCheckbox id="select" value="#{reqInfo.change}">
<f:ajax event="click" render="@form"
listener="#{reqSummaryHandler.selectCertList}">
</f:ajax>
<f:attribute name="selectCert" value="#{reqInfo}" />
</h:selectBooleanCheckbox>
</p:column>
<p:column sortBy="#{reqInfo.certificateNumber}"
filterBy="#{reqInfo.certificateNumber}" style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="#{label.certNumber}" />
</f:facet>
<h:outputText align="left" value="#{reqInfo.certificateNumber}" />
</p:column>
<p:column sortBy="#{reqInfo.certificateVersion}"
filterBy="#{reqInfo.certificateVersion}" style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Version" />
</f:facet>
<h:outputText align="left" value="#{reqInfo.certificateVersion}" />
</p:column>
<p:column sortBy="#{insuredInfo.generalPartyInfo.nameInfo.commlName.commercialName}"
filterBy="#{insuredInfo.generalPartyInfo.nameInfo.commlName.commercialName}" style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Insured" />
</f:facet>
<ui:repeat value="#{reqInfo.insuredOrPrincipalList}"
var="insuredInfo">
<h:outputText align="left"
value="#{insuredInfo.generalPartyInfo.nameInfo.commlName.commercialName}" />
</ui:repeat>
</p:column>
<p:column sortBy="#{reqInfo.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}"
filterBy="#{reqInfo.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}" style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Certificate Holder" />
</f:facet>
<h:outputText align="left"
value="#{reqInfo.certificateHolder.additionalInterest.generalPartyInfo.nameInfo.commlName.commercialName}" />
</p:column>
<p:column sortBy="#{reqInfo.businessPurposeTypeCd}"
filterBy="#{reqInfo.businessPurposeTypeCd}" style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Activity Performed" />
</f:facet>
<h:outputText align="left" value="#{reqInfo.businessPurposeTypeCd}" />
</p:column>
<p:column style="text-align:center;white-space: normal;nowrap"
filterBy="#{reqInfo.com_csc_StatusCd}"
sortBy="#{reqInfo.com_csc_StatusCd}" styleClass="activityStyle">
<f:facet name="header">
<h:outputLabel value="Certificate Status" />
</f:facet>
<h:outputText align="left" value="#{reqInfo.com_csc_StatusCd}" />
</p:column>
<p:column sortBy="#{reqInfo.certWordingEndorsementInd}"
filterBy="#{reqInfo.certWordingEndorsementInd}" style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Third Party" />
</f:facet>
<h:outputText align="left"
value="#{reqInfo.certWordingEndorsementInd}" />
</p:column>
<p:column sortBy="#{reqInfo.manualInd}"
filterBy="#{reqInfo.manualInd}" style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Manual Form" />
</f:facet>
<h:outputText align="left" value="#{reqInfo.manualInd}" />
</p:column>
<p:column sortBy="#{reqInfo.mnlAddendumInd}"
filterBy="#{reqInfo.mnlAddendumInd}" style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Manual Addendum" />
</f:facet>
<h:outputText align="left" value="#{reqInfo.mnlAddendumInd}" />
</p:column>
<p:column style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Path" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText id="pathSelection" align="left"
value="#{reqInfo.com_csc_CertificateDispositionCd}"
readonly="true" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu
value="#{reqInfo.com_csc_CertificateDispositionCd}">
<f:selectItems value="#{supportData.requestRoutePath}"
itemValue="#{supportData.requestRoutePath}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
<p:rowEditor rendered="#{reqInfo.enabled}" />
</p:column>
<p:column style="text-align:center;white-space: normal;nowrap">
<f:facet name="header">
<h:outputLabel value="Action" />
</f:facet>
<p:commandLink id="ViewCertificate"
update="accountSummaryForm,reqActList,ViewCertificate,URLVal"
value="#{label.viewCert}" oncomplete="navigateNewWindow()">
<f:setPropertyActionListener value="#{reqInfo}" name="selectCert"
target="#{reqSummaryHandler.selectedCertificate}" />
<f:setPropertyActionListener value="Link" name="selectCert"
target="#{reqSummaryHandler.selection}" />
<f:setPropertyActionListener value="#{reqInfo}" name="selectCert"
target="#{reqSummaryHandler.certDocRequest}" />
</p:commandLink>
<p:spacer width="5" height="2" />
<ui:repeat value="#{reqInfo.availableFunctions.funArrayCertListForReqActivity}"
var="linkInfo">
<h:commandLink id="View" value="#{linkInfo.label}"
action="#{linkInfo.getLabel}" ajax="false">
<f:setPropertyActionListener value="#{reqInfo}"
name="selectCert"
target="#{reqSummaryHandler.selectedCertificate}" />
<f:setPropertyActionListener value="Link"
name="selectCert"
target="#{reqSummaryHandler.selection}" />
</h:commandLink>
<p:spacer width="5" height="2" />
</ui:repeat>
</p:column>
я не хочу горизонтальную прокрутку.
Пожалуйста, дайте мне любое предложение ....