スクロールバーがdataTableに表示されないようにするにはどうすればよいですか？

Question

私はprimefacesを使ってWebアプリケーションを開発しています。私はdataTableを使用していますし、マウスをテーブルに移動するたびに、スクロールバーが下に表示され、時には右に表示されます。私はこのスクロールバーを必要としない、または必要としません。

<p:dataTable var="o" id="territoryTable" widgetVar="territoryDataTable" value="#{searchTerritory.lazyModel}" lazy="true" dynamic="true" paginator="true" paginatorPosition="bottom" rows="#{configParams['dataTable.row.default']}" styleClass="dataTableMargin" 
 
    rowKey="#{o.id}" selectionMode="single" rowsPerPageTemplate="#{configParams['dataTable.row.values']}"> 
 

 
    <p:ajax event="rowSelect" listener="#{searchTerritory.onRowSelect}" /> 
 
    <p:ajax event="filter" ignoreAutoUpdate="true" /> 
 

 
    <p:column headerText="#{messages['territory.id']}"> 
 
    <h:outputText value="#{o.custom_id}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['territory.name']}"> 
 
    <h:outputText value="#{o.name}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['territory.description']}"> 
 
    <h:outputText value="#{o.description}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['status.active']}"> 
 
    <p:selectBooleanCheckbox disabled="true" value="#{o.activeFlag}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['territory.coordinator.TerritoryManager']}"> 
 
    <h:outputText value="#{o.territoryManager.name}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['territory.coordinator.status']}"> 
 
    <h:outputText value="#{o.territoryManager.activeFlag eq true ? 'Active' : 'Inactive'}" /> 
 
    </p:column> 
 
</p:dataTable>

誰もがそれを削除する方法についてのアイデアを得ましたか。

Answer 1

私はスクロールバーを隠す純粋なCSSソリューションを提案します。オーバーフローしたコンテンツは表示されません。

は、次のあなたのCSSに挿入する必要があります：dataTableMarginはあなたがstyleClassのとui-datatable-tablewrapperを与えている

.dataTableMargin .ui-datatable-tablewrapper { 
    overflow: hidden; 
} 

は、DataTableのコンテンツのラッパーです。

PS：コンテンツが常に特定のビュー内にあることを確認してください。さもなければ大きすぎる内容はちょうど断ち切られます。