Using Grid.scrollRowIntoView fails when table (or container) has style "display: none"

[andreasmueller92]

How to reproduce:

• Place the table inside a div, e.g. by using GoldenLayout
• Set div css style "display: none", e.g. by selecting another tab in GoldenLayout
• Use Grid.scrollRowIntoView(<rowThatWouldRequireScrolling>)
• Remove div css style "display: none", e.g. by selecting the tab in GoldenLayout again

Result:

• Viewport is (partly) blank because row positions could not be correctly calculated

Workaround:

• When the table gets visible again, one can use grid.resizeCanvas(), and it at least get's rendered again (taken from https://github.com/mleibman/SlickGrid/issues/341).
• Call Grid.scrollRowIntoView() again.

Possible solution:

• All scrolling functions should check whether the grid (or any parent) has "display: none".
• If no, just scroll
• If yes, wait to be visible again and scroll afterwards

[6pac]

Don't know if this is any use, but I had similar problems with init() on hidden grids after I started using Slickgrid. Check out cacheCssForHiddenInit() and restoreCssFromHiddenInit() - they are used to tweak the HTML so that the init calculations work correctly. They are not in the MLeibman repo.

[andreasmueller92]

As far as I understand the code, it is always internally called on init() so that the user does not have to care about hidden parents at all.

This kind of workaround would be great to have for all scrolling functions, as they also seem to be based on css properties.

[6pac]

Could you check those calls and see if they solve your problems? If so, I'll probably add a 'handleHiddenCssOnScroll' option and call these conditional on the option.

[andreasmueller92]

I just inserted cacheCssForHiddenInit(); as the first and restoreCssFromHiddenInit(); as the last statement into function scrollRowIntoView(row, doPaging) (had to do it there, the functions are not part of the public API):

Previously, when scrollRowIntoView was called on a hidden grid, the viewport just went blank and the scrollbar did not change its position. When scrolling in the table afterwards, rows reappeared, but as if there was no scrolling at all.

Now, the viewport still goes blank, but the scrollbar position is correctly adjusted. The rows reappearing on scroll are the ones the table was scrolled to.

Problem is (according to element inspector in the browser) that the top style properties of the rows are still not recalculated. The Canvas is moved, but the rows' top stays unchanged

[ghiscoding]

Closing since this is an old issue and a lot changed since this issue was opened, our whole code structure changed (we removed jQuery/jQueryUI and we migrated to TypeScript), if this is still a problem then please provide more details.