angularjs-ui-grid has extra white space after scrolling to the bottom of the list

Question

When I have enough rows in my ui-grid to do scrolling, it seems to have a lot of whitespace at the bottom of the list for some reason.

I've nailed it down to this piece of code (i think?):

styles['margin-top'] = hiddenRowWidth + 'px';

line 3038 of ui-grid.js

Not sure why it's adding so much white space at the bottom though. Any ideas? I was thinking it's because my container is 100% height, but it seems to do this even with a specific pixel height as well.

edit: Well, now I'm not certain that it was that code that's the culprit. The ui-grid-canvas element has a HUGE height, still not sure why.

Closing this out, as it seems to be something CSS related that's only a problem for my custom CSS.

Answer 1

I figured out the culprit.

I had added padding: 0 to .ui-grid-canvas, because the 1px space between the header border and the start of the rows was really bugging me. However, for whatever reason this breaks the calculations when it's trying to handle virtualization for scrolling.

Upon removing my custom padding, everything seems to work normally.