[explorev2] improving the scrolling/scrollbars placement #1840
Conversation
| @@ -186,7 +186,6 @@ class ChartContainer extends React.Component { | |||
| id={this.props.containerId} | |||
| ref={(ref) => { this.chartContainerRef = ref; }} | |||
| className={this.props.viz_type} | |||
| style={{ overflowX: 'auto' }} | |||
There was a problem hiding this comment.
this was added because there are some charts that don't scale to the width of the container, and so a scrollbar was needed to see the rest of the chart. i thought i did see this functionality in v1. i will try and find an example.
There was a problem hiding this comment.
I did a bit of code archeology for this as I remembered fixing the call. overflow-x was introduced here 2d0ebea, but wasn't valid React style, so I fixed the syntax here c155857 , but by fixing it I really just brought something we didn't want.
Here are example of viz that override to overflow-x to set it to auto:
https://github.com/airbnb/superset/blob/master/superset/assets/visualizations/nvd3_vis.css#L15
https://github.com/airbnb/superset/blob/master/superset/assets/visualizations/nvd3_vis.css#L28
There was a problem hiding this comment.
Somehow setting overflow-x to auto makes the table and pivot table viz show too many scrollbars because of the way the "fixed header" scrolling is implemented
There was a problem hiding this comment.
i'm ok with taking this out. i'll add an issue to investigate how viz's are scaled width wise, to make sure there aren't cases where part of the viz is cut off.
mistercrunch
added
🏷️ bot
For the controls, moving the scrollbar outside the panel as opposed to inside the panel.
Before:
After:
Also, in v1, the chart container doesn't allow to overflow-x, unless the viz's CSS override that. Matching this behavior here so that the table view doesn't show an X axis scrollbar.