fix: do not show vertical scrollbar for charts in dashboard (#12478)

* fix: do not show vertical scrollbar for charts in dashboard * Proper fix for #11419 Co-authored-by: Jesse Yang <jesse.yang@airbnb.com>
apache · Jan 13, 2021 · e9d66e9 · e9d66e9
1 parent 8f83afc
commit e9d66e9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 17 deletions.
diff --git a/superset-frontend/src/dashboard/stylesheets/components/chart.less b/superset-frontend/src/dashboard/stylesheets/components/chart.less
@@ -114,12 +114,6 @@
   }
 }
 
-.chart-slice {
-  height: calc(100% - 32px);
-  overflow: auto;
-  height: 100%;
-}
-
 .dot {
   @dot-diameter: 4px;
 

diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
@@ -22,7 +22,7 @@ import { debounce } from 'lodash';
 import { max as d3Max } from 'd3-array';
 import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
 import Button from 'src/components/Button';
-import { t, styled, SupersetClient } from '@superset-ui/core';
+import { t, SupersetClient } from '@superset-ui/core';
 
 import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
 import FormLabel from 'src/components/FormLabel';
@@ -95,13 +95,6 @@ const defaultProps = {
   instantFiltering: false,
 };
 
-const Styles = styled.div`
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  overflow: visible;
-`;
-
 class FilterBox extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -427,9 +420,9 @@ class FilterBox extends React.PureComponent {
   }
 
   render() {
-    const { instantFiltering } = this.props;
+    const { instantFiltering, width, height } = this.props;
     return (
-      <Styles>
+      <div style={{ width, height, overflow: 'auto' }}>
         {this.renderDateFilter()}
         {this.renderDatasourceFilters()}
         {this.renderFilters()}
@@ -443,7 +436,7 @@ class FilterBox extends React.PureComponent {
             {t('Apply')}
           </Button>
         )}
-      </Styles>
+      </div>
     );
   }
 }

diff --git a/superset-frontend/src/visualizations/FilterBox/transformProps.js b/superset-frontend/src/visualizations/FilterBox/transformProps.js
@@ -27,6 +27,8 @@ export default function transformProps(chartProps) {
     queriesData,
     rawDatasource,
     rawFormData,
+    width,
+    height,
   } = chartProps;
   const {
     onAddFilter = NOOP,
@@ -53,6 +55,8 @@ export default function transformProps(chartProps) {
 
   return {
     chartId: sliceId,
+    width,
+    height,
     datasource: rawDatasource,
     filtersChoices: queriesData[0].data,
     filtersFields,