Table header-body misalignment when scroll bar is visible

[remreren]

Screenshot

Scroll bar invisible:

Scroll bar visible:

Description

I am using Chrome on Mac.

When an external device is connected, the scroll bar stays visible always and pushes the body of the table resulting with misalignment of header and body.

I tried to fix it using the scrollbar-gutter but did not work.

The setup has ~80 columns. The problem happens when we scrolled horizontally until the last column

Design input

[dosubot[bot]]

Hey @remreren! 👋 I'm here to help you with bugs, questions, and becoming a contributor. Let's tackle this together!

The issue of table header-body misalignment when the scrollbar is visible can be tricky, especially when dealing with different browser behaviors. Here are a few suggestions to address this:

1. Use scrollbar-gutter: Ensure that you are applying the scrollbar-gutter CSS property correctly. It should be set on the container that has the scrollbar, like so:

   .table-container {
    scrollbar-gutter: stable both-edges;
   }

   This property helps reserve space for the scrollbar, preventing layout shifts when it appears.

2. JavaScript Synchronization: If CSS alone doesn't solve the issue, consider using JavaScript to synchronize the header and body scroll positions. The onScroll event handler can be used to adjust the header's scroll position to match the body's scroll position, as seen in the Superset codebase:

   const onScroll: UIEventHandler<HTMLDivElement> = e => {
    if (scrollHeaderRef.current) {
      scrollHeaderRef.current.scrollLeft = e.currentTarget.scrollLeft;
    }
   };

3. CSS Flexbox or Grid: Consider using CSS Flexbox or Grid for layout, which can provide more control over alignment and spacing, potentially mitigating the misalignment issue.

4. Check for Browser-Specific Issues: Since you're using Chrome on Mac, ensure that there are no browser-specific quirks affecting the scrollbar behavior. Testing on different browsers or devices might help identify if the issue is isolated to a specific environment.

These steps should help in addressing the misalignment issue. If the problem persists, further investigation into the specific CSS and JavaScript implementations in your project might be necessary.

To continue talking to Dosu, mention @dosu.

[rusackas]

Is this the Table viz, or another table (e.g. query results, data/sampes pane, etc)? What version of Superset are you on? What device did you plug in?

[remreren]

This main problem I mentioned occurs in the table viz. Since you mentioned, I have also take a look to query results has the same problem but samples pane works fine since the scrollbar is at the outside of the table.

Table viz

Table edit page, preview

Query results

Sample pane

I am running Superset 4.0.1 version.

I tried it with an external mouse.