Ag grid not showing scrollbars

Question

After hours of researching, I still can't solve this strange problem.

I have a simple Ag Grid in my Angular project (version 10.2, Ag Grid version 24.1), nothing special, just to show non-editable data (note: rowData is not async because I manually set the data):

<div>
  <ag-grid-angular
    #agGrid
    id="grid"
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [gridOptions]="gridOptions"
  ></ag-grid-angular>
</div>

Grid options are:

    this.gridOptions = {
        defaultColDef: {
          sortable: true,
          resizable: true,
          editable: true,
          suppressMenu: true,
          filter: true,
          floatingFilter: true,
          filterParams: { buttons: ['clear'] }
        },
        headerHeight: 60,
        animateRows: true,
        pagination: false,
        paginationAutoPageSize: false,
    }

If I use it in a new project, scrollbars are shown perfectly, no issues.

But if I use it in my current project, no bars are shown at all, doesn't matters if I force it with instructions from docs (override the overflow of the .ag-body-viewport to scroll !important. The !important is necessary to override the inline styling.) or with settings like alwaysShowVerticalScroll: true.

In my project I'm using Bootstrap and I have a classic structure (header, left menu bar, content). I'm guessing that some style is breaking the Ag Grid scrollbar sistem, but I'm unable to find what is happening.

Can someone give me a tip of what can I check to solve this? I was searching for any "overflow" in my styles.css, but no luck.

Eagle Eagle · Accepted Answer · 2020-11-19T13:09:03

Ok, so a CSS developer show me the right way.

I will share this knowledge here for future references, because it is not obvious for a non CSS dev (like me) where to find this.

The problem was that there was a general style for all the app:

::-webkit-scrollbar {
    width: 0;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

I was searching only for "overflow" styles, as it was the key when I googled about this problem. And it is a pseudo-class, so it appears at bottom of Chrome Dev tools Style.

After removing that, the scrolls works as expected.

Ag grid not showing scrollbars

1 Answers