Bug Report: Column header misalignment when resizing vertically with scrollY value based on vh

Sidetrack

Simple test case: https://live.datatables.net/fowibedu/2/edit?js,output

To reproduce, simply resize the window vertically only to trigger the appearance/disappearance of the table body scroll bar...note that the column headings do not resize to reflect the appearance/disappearance of the scrollbar (as they do when resizing the window both horizontally and vertically simultaneously).

In the code, this looks to be due to a conscious choice to only monitor for changes to widths (i.e., to the 0-height dt-autosize element) for purposes of triggering re-adjustment of the columns. However, when the scrollY value is set based on 'vh' units (e.g., scrollY: '50vh', scrollY: 'calc(100vh - 300px)', etc. ), which is done to avoid the potential appearance of an 'ugly' second scrollbar in the element containing the table as a whole, even a pure change in height can cause the appearance/disappearance of the body scrollbar, resulting in this visual glitch.

As a local fix, I've tried modifying the code to attach the ResizeObserver directly to the dt-scroll-body element instead of to dt-autosize so as to detect both width and height changes, which seems to address this issue- though not sure if this will have other/unitended consequences to performance, or otherwise (i.e., the fact that the dt-autosize element was introduced in the first place perhaps suggests there's something wrong with simply observing dt-scroll-body directly)?

allan

That's an interesting one - thanks for posting this. dt-autosize was used rather than dt-scroll-body, since the later only exists when the scrolling features of DataTables are enabled.

Possibly what I should do is observe the dt-scroll-body instead when scrolling is active. I'll have a bit of a think about that.

Regards,
Allan