CODEWITHSUNDEEP
jsfprimefacesprimefaces-datatable
Liam Paquette
Liam Paquette

Reputation: 79

How do I stop scroll bar from appearing in dataTable?

I'm working on a web app using primefaces. I'm using a dataTable and everytime I move my mouse in to the table, a scroll bar appears on the bottom, and occasionally on the right. I don't want or need this scroll bar. Mouse inside the table and useless scrollbar appears on the bottom 

<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>

Anyone got ideas on how to remove it?

Upvotes: 1

Views: 2261

Answers (2)

RKS
RKS

Reputation: 9

Pure Css Solution that worked for me in Angular

 ::ng-deep {
.p-datatable-wrapper::-webkit-scrollbar {
    scrollbar-width: none; /* Hides the scrollbar */
  }
}

Upvotes: -1

kaiser
kaiser

Reputation: 1009

I would suggest a pure css solution where you just hide the scrollbar. Content that overflows will be hidden.

You need to insert in your css the following:

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

where dataTableMargin is you given styleClass and ui-datatable-tablewrapperis a wrapper around the datatable content.

PS: make sure, that your content is always inside the given view. Otherwise too big contents will be just cut off.

Upvotes: 2

Related Questions