/explore plots scroll bar in Chrome/FF/Edge causes plot shift shifts

[dognotdog]

It looks like the scroll bar in Safari is overlayed on the plot html elements, and does not change layout, but at least Chrome's scroll bar displaces the plots, causing a misalgnment in the date axis and plot areas.

References: https://www.filamentgroup.com/lab/scrollbars/

[dognotdog]

Actually, it looks like this only happens on some Chrome browsers?

[dognotdog]

So apparently on the Mac scrollbars are overlayed, but on Windows they are displacing content.

Maybe scrollbar-width: none on the plots is a decent solution for now, though it's not ideal for accessability?

[pdille]

If we want scrollbars to be consistent in appearance (always visible when necessary and not the overlay crap MacOS does) we can talk offline. I can help with the CSS for that. I use this all the time and it works consistently well across platforms and browsers. It's a nightmare that FF and Chrome does different scroll bar heights or MacOS does the overlay....

[dognotdog]

@pdille the main difficulty in keep this aligned is that the x-axis is NOT scrolled, but the area below it is, and the layout did not take the scrollbar issue into account. Layout looks like so:

.-flex-column-(main container)------.
|   .-date-axis-row-------------.   |
|   | .-x-axis----. .-corner--. |   |
|   | |           | |         | |   |
|   | '-----------' '---------' |   |
|   '---------------------------'   |
| .-flex-col-(scrollable plots)---. |
| | .-plot-row------------------. | |
| | | .-plot------. .-y-axis--. | | |
| | | |           | |         | | | |
| | | '-----------' '---------' | | |
| | '---------------------------' | |
| | .-plot-row------------------. | |
| | | .-plot------. .-y-axis--. | | |
| | | |           | |         | | | |
| | | '-----------' '---------' | | |
| | '---------------------------' | |
| '-------------------------------' |
'-----------------------------------'

The idea is that the axis row is of fixed vertical height, and the scrollable plots fill the rest of the space vertically, and the y-axis and corner elements are fixed with, with x-axis and plots filling the rest of the space horizontally, without any JS involvement.

If there is no easy way to align the corner and y-axis elements, maybe the easiest would be to accept the misalignment, but correct the plot ranges, as right now they are misaligned with the date axis.

[dognotdog]

Maybe a good ole table with a sticky header would work?