Bug: Responsive does not properly work with scrollY

[nmiyazaki-chapleau]

Link: https://stackblitz.com/edit/vitejs-vite-kwlzyv?file=src%2Fmain.ts

To reproduce, reduce the horizontal width of the window while the page is open, enough to hid ethe office column. Then, widen the horizontal length of the window again. The row data will be misaligned with the columns.

I personally use BS5 and jQuery, but it is reproducible in the base version (which is the one I linked).

I believe this is due to either row cell data wrapping or column title wrapping.

[nmiyazaki-chapleau]

After more investigation, it appears to be the cell's wrapping that causes this issue. Hiding a column that has a row cell with wrapping data will cause all other columns after it to be misaligned when unhidden.

[AllanJard]

I'm not seeing the error I'm afraid. Maybe I've just being blind...

Without the Office column:

Resized to now include the office column:

Moreover the example with Responsive and scrolling on DataTables.net appears to work okay: https://datatables.net/extensions/responsive/examples/styling/scrolling.html .

[nmiyazaki-chapleau]

I forgot about the example on the website! That one doesn't work either on my end. Here's a video link: https://streamable.com/g24267

[AllanJard]

I just managed to get it into an odd state as well:

I'm not immediately sure what is causing that I'm afraid. Almost certainly some kind of async issue with the resizing and the calculations being performance out of sequence.

I'll look into it as soon as I can, but I'm drowning in support at the moment, so I'm not 100% sure when that will be.

[nmiyazaki-chapleau]

No worries! Sync issue makes sense. Thanks for looking into it!