Apache Superset Table header-body misalignment when scroll bar is visible

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

Comment From: 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: css .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: tsx 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.

Comment From: 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?

Comment From: 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.

Comment From: hainenber

Related #32296

Can you help reproducing this in the latest master branch? I can't reproduce it in that revision, btw.

Comment From: remreren

I tried with clone from master. As long as I can see, the issue still persists.

Info: - Commit: e98194cdd34f459b92b936f73a73c507433b90cc - OS: MacOS (15.3) - Connected Devices: Mouse - Screen Resolution: 3024 x 1964

Steps to reproduce: - Bring project up with default settings on docker (using docker-compose.yml, include default examples) - Import the exported dashboard below.

dashboard_export_20250306T114613.zip

Comment From: fsk

Hi, we are still waiting for an answer to our question. Could you please answer it?

Comment From: rusackas

I am also currently unabele to reproduce this problem. Unless we can get a reproducible test case (i.e. a chart config using one of the example datasets) that fails consistently, this will be closed as not-planned.

We're very much open to fixes/PRs from anyone seeing the problem who's willing to investigate.