[explorev2] improving the scrolling/scrollbars placement

apache · Dec 16, 2016 · 7b35235 · 7b35235
1 parent 7a5bb94
commit 7b35235
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 52 deletions.
diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -196,7 +196,6 @@ class ChartContainer extends React.Component {
           ref={(ref) => { this.chartContainerRef = ref; }}
           className={this.props.viz_type}
           style={{
-            overflowX: 'auto',
             opacity: loading ? '0.25' : '1',
           }}
         />

diff --git a/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
@@ -61,56 +61,52 @@ class ControlPanelsContainer extends React.Component {
 
   render() {
     return (
-      <Panel>
-        {this.props.alert &&
-          <Alert bsStyle="warning">
-            {this.props.alert}
-            <i
-              className="fa fa-close pull-right"
-              onClick={this.removeAlert.bind(this)}
-              style={{ cursor: 'pointer' }}
-            />
-          </Alert>
-        }
-        {!this.props.isDatasourceMetaLoading &&
-          <div className="scrollbar-container">
-            <div className="scrollbar-content">
-              {this.sectionsToRender().map((section) => (
-                <ControlPanelSection
-                  key={section.label}
-                  label={section.label}
-                  tooltip={section.description}
-                >
-                  {section.fieldSetRows.map((fieldSets, i) => (
-                    <FieldSetRow
-                      key={`${section.label}-fieldSetRow-${i}`}
-                      fieldSets={fieldSets}
-                      fieldOverrides={this.fieldOverrides()}
-                      onChange={this.onChange.bind(this)}
-                      fields={this.props.fields}
-                      form_data={this.props.form_data}
-                    />
-                  ))}
-                </ControlPanelSection>
+      <div className="scrollbar-container">
+        <Panel className="scrollbar-content">
+          {this.props.alert &&
+            <Alert bsStyle="warning">
+              {this.props.alert}
+              <i
+                className="fa fa-close pull-right"
+                onClick={this.removeAlert.bind(this)}
+                style={{ cursor: 'pointer' }}
+              />
+            </Alert>
+          }
+          {!this.props.isDatasourceMetaLoading && this.sectionsToRender().map((section) => (
+            <ControlPanelSection
+              key={section.label}
+              label={section.label}
+              tooltip={section.description}
+            >
+              {section.fieldSetRows.map((fieldSets, i) => (
+                <FieldSetRow
+                  key={`${section.label}-fieldSetRow-${i}`}
+                  fieldSets={fieldSets}
+                  fieldOverrides={this.fieldOverrides()}
+                  onChange={this.onChange.bind(this)}
+                  fields={this.props.fields}
+                  form_data={this.props.form_data}
+                />
               ))}
-              {this.filterSectionsToRender().map((section) => (
-                <ControlPanelSection
-                  key={section.label}
-                  label={section.label}
-                  tooltip={section.description}
-                >
-                  <Filters
-                    filterColumnOpts={[]}
-                    filters={this.props.form_data.filters}
-                    actions={this.props.actions}
-                    prefix={section.prefix}
-                  />
-                </ControlPanelSection>
-              ))}
-            </div>
-          </div>
-        }
-      </Panel>
+            </ControlPanelSection>
+          ))}
+          {this.filterSectionsToRender().map((section) => (
+            <ControlPanelSection
+              key={section.label}
+              label={section.label}
+              tooltip={section.description}
+            >
+              <Filters
+                filterColumnOpts={[]}
+                filters={this.props.form_data.filters}
+                actions={this.props.actions}
+                prefix={section.prefix}
+              />
+            </ControlPanelSection>
+          ))}
+        </Panel>
+      </div>
     );
   }
 }

diff --git a/superset/assets/javascripts/explorev2/main.css b/superset/assets/javascripts/explorev2/main.css
@@ -11,9 +11,8 @@
   left: 0px;
   right: 0px;
   bottom: 0px;
-  overflow: scroll;
+  overflow-y: auto;
   margin-right: 0px;
-  margin-bottom: 100px;
 }
 
 .fave-unfave-icon, .edit-desc-icon {