ag-grid: V29.0.0 -> V29.2.0 Vertical Scrolling not working. V28.2.1 is fine.

I’m submitting a … (check one with “x”)

[] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[x] support request => see 'Requesting Community Support'

Current behavior

I’ve been using Community version 28.2.1 and it’s been fine. Just upgraded to V29.2.0 and noticed the sort is very slow to initiate, and also the vertical scroll on my pagination (80 rows per page) now doesn’t work.

I tested all versions again from V28.2.1 (working) and V29.0, V29.1, and V29.2

Vertical scrolling stops working and the vertical scroll bar doesn’t show up from V29.0 onewards. Horizontal scrolling works, and the horizontal scroll bar shows up fine when I drag a column off screen.

CSS was using the following in V28.2.1 just fine, with both vertical & horizontal scrollbars aok:

.ag-body-viewport-wrapper.ag-layout-normal { overflow-x: scroll !important; overflow-y: scroll !important; }

::-webkit-scrollbar { -webkit-appearance: none; width: 8px; height: 8px; }

::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #2CB1FF; box-shadow: 0 0 1px rgba(255, 255, 255, .5); }

Nothing in the release notes about scrolling related to this for V29.0

Any clues as to what I can look into to get the vertical scrolling back, like it was in V28.2.1

If I revert back to V28.2.1 paginated vertical scrolling is back just fine.

I’m assuming the vertical scrolling isn’t working because the vertical scroll bar isn’t showing, and possibly that’s what triggers AG Grid vertical scroll? But unsure why the CSS working in V28.2.1 now doesn’t work in V29.0.0

The slow sort reaction on column header clicking is puzzling as well, as in V28.2.1 it sorts virtually instantaneuously. So perhaps something else is going on there too, but I couldn’t see any breaking changes that were related to either issue.

Expected behavior

Vertical scrolling with pagination should work as it does in V28.2.1

Please tell us about your environment:

Windows 11

  • AG Grid version: X.X.X

Versions as described above.

  • Browser:

“Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/604.1.38 (KHTML, like Gecko) Chrome/49.0.2623 Safari/604.1.38 CoherentGT/2.0”

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

Javascript

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 17 (4 by maintainers)

Most upvoted comments

Ok, I took another crack at updating with V1.30 and while it had the same issue I solved it, finally.

For reference sake, in case anybody else has this issue (as other answers like use the nostyle and load CSS seperately didn’t work):

As suspected, the solution was obviously simple in the end, but took some looking to figure out.

I need overflow-y: auto !important; to get the vertical scroll bar to show, and was previously using .ag-body-viewport-wrapper from V28.2.1 which no longer exists (maybe V1.29 changed it?) and is now just .ag-body.

/* Scrollbar fix*/ /* .ag-body-viewport-wrapper.ag-layout-normal { overflow-x: auto !important; overflow-y: auto !important; } */ .ag-body.ag-layout-normal { overflow-x: auto !important; overflow-y: auto !important; }

Maybe I missed it in the changes, but would be nice if css changes like that were obviously documented.

On the plus side, V1.30 feels snappier and the new cell editors look useful!

Thanks.