Unable to Scroll in the Data and Customize Sections When Creating or Editing Charts

[v9dev]

Bug description

Bug: Unable to Scroll in the Data and Customize Sections When Creating or Editing Charts

Apache Superset Version

• [Latest Git Clone]

Issue Description

When adding or modifying a chart in Apache Superset, users are unable to scroll through the available input fields in the Data and Customize sections. As a result, some fields become inaccessible, making it difficult to properly configure charts.

Steps to Reproduce

1. Clone the Apache Superset master repository from GitHub:

   git clone https://github.com/apache/superset.git
   cd superset
   docker compose -f docker-compose-non-dev.yml up

2. Open Apache Superset in the browser.
3. Navigate to the Charts section and either create a new chart or edit an existing one.
4. Expand the Data or Customize panel to access chart configuration options.
5. Attempt to scroll down to access additional fields within these sections.

Observed Behavior

• Scrolling within the Data and Customize sections is non-functional.
• Some fields are cut off and cannot be accessed by the user.

Expected Behavior

• Users should be able to scroll through the entire panel to access all input fields while configuring charts.

Environment Details

• OS: Window 11 With Docker Compose
• Docker Compose Mode: Non-dev mode
• Browser: Brave, Chrome,

Additional Information

This issue occurs when running Apache Superset in any mode

non-development mode (production mode). In development mode, it’s possible to resolve the issue temporarily using custom CSS or layout fixes, but these changes do not persist when using the production build.

Temporary Development Fix

Changing the following HTML works with developer tool in inspect mode: 100% to 100vh

<div class="col-sm-3 explore-column controls-column" style="position: relative; user-select: auto; width: 320px; height: 100%; max-width: 33%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;">  to <div class="col-sm-3 explore-column controls-column" style="position: relative; user-select: auto; width: 320px; height: 100vh; max-width: 33%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"> 

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.10

Node version

Not applicable

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hey @v9dev! I'm here to help you with any bugs, questions, or contributions you have regarding Apache Superset. Let's work together to address your issue.

The scrolling issue in the Data and Customize sections of the chart configuration panel in Superset is related to the CSS styles applied to these sections. The .tab-content class has overflow: auto;, which should allow scrolling when the content exceeds the available space ^[1]. However, it seems that the current setup in non-development mode is not functioning as expected.

A temporary fix you mentioned involves changing the height property from 100% to 100vh in the inline style of the explore-column controls-column div. This change forces the column to take the full viewport height, which can help in making the content scrollable.

To address this issue in a more permanent way, you might consider:

1. CSS Adjustment: Ensure that the CSS for the .tab-content or the parent container is correctly set to allow scrolling. You might need to adjust the height or overflow properties in the production CSS files.

2. JavaScript Solution: Implement a JavaScript solution to dynamically adjust the height of the panels based on the viewport size, ensuring that scrolling is enabled.

3. Environment Configuration: Verify that the production build is correctly applying the necessary styles. Sometimes, differences in the build process between development and production can lead to such issues.

These steps should help in resolving the scrolling issue in a more stable manner across different environments.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}