diff --git a/superset/assets/javascripts/SqlLab/components/App.jsx b/superset/assets/javascripts/SqlLab/components/App.jsx
index 2d45281634..3698a2a258 100644
--- a/superset/assets/javascripts/SqlLab/components/App.jsx
+++ b/superset/assets/javascripts/SqlLab/components/App.jsx
@@ -34,16 +34,17 @@ class App extends React.PureComponent {
}
getHeight() {
const warningEl = $('#navbar-warning');
- const navTabsEl = $('.nav-tabs');
+ const tabsEl = $('.nav-tabs');
const searchHeaderEl = $('#search-header');
const alertEl = $('#sqllab-alerts');
- const headerNavEl = $('header .navbar');
- const navHeight = headerNavEl.outerHeight() + parseInt(headerNavEl.css('marginBottom'), 10);
- const searchHeaderHeight = searchHeaderEl.outerHeight() + parseInt(searchHeaderEl.css('marginBottom'), 10);
- const headerHeight = navTabsEl.outerHeight() ? navTabsEl.outerHeight() : searchHeaderHeight;
+ const headerEl = $('header .navbar');
+ const headerHeight = headerEl.outerHeight() + parseInt(headerEl.css('marginBottom'), 10);
+ const searchHeaderHeight = searchHeaderEl.length > 0 ?
+ searchHeaderEl.outerHeight() + parseInt(searchHeaderEl.css('marginBottom'), 10) : 0;
+ const tabsHeight = tabsEl.length > 0 ? tabsEl.outerHeight() : searchHeaderHeight;
const warningHeight = warningEl.length > 0 ? warningEl.outerHeight() : 0;
const alertHeight = alertEl.length > 0 ? alertEl.outerHeight() : 0;
- return `${window.innerHeight - navHeight - headerHeight - warningHeight - alertHeight}px`;
+ return `${window.innerHeight - headerHeight - tabsHeight - warningHeight - alertHeight}px`;
}
handleResize() {
this.setState({ contentHeight: this.getHeight() });
@@ -64,7 +65,7 @@ class App extends React.PureComponent {
content = (
-
+
);
}
diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
index cbfaf3597f..3eab16c3b9 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -29,7 +29,7 @@ import { t } from '../../locales';
const propTypes = {
actions: PropTypes.object.isRequired,
- height: PropTypes.string.isRequired,
+ getHeight: PropTypes.func.isRequired,
database: PropTypes.object,
latestQuery: PropTypes.object,
tables: PropTypes.array.isRequired,
@@ -73,9 +73,11 @@ class SqlEditor extends React.PureComponent {
}
onResize() {
const height = this.sqlEditorHeight();
+ const editorPaneHeight = this.props.queryEditor.height || 200;
+ const splitPaneHandlerHeight = 15;
this.setState({
- editorPaneHeight: this.props.queryEditor.height,
- southPaneHeight: height - this.props.queryEditor.height,
+ editorPaneHeight,
+ southPaneHeight: height - editorPaneHeight - splitPaneHandlerHeight,
height,
});
@@ -122,11 +124,8 @@ class SqlEditor extends React.PureComponent {
this.setState({ ctas: event.target.value });
}
sqlEditorHeight() {
- // quick hack to make the white bg of the tab stretch full height.
- const tabNavHeight = 40;
- const navBarHeight = 56;
- const mysteryVerticalHeight = 50;
- return window.innerHeight - tabNavHeight - navBarHeight - mysteryVerticalHeight;
+ const horizontalScrollbarHeight = 25;
+ return parseInt(this.props.getHeight(), 10) - horizontalScrollbarHeight;
}
renderEditorBottomBar() {
let ctasControls;
@@ -227,8 +226,7 @@ class SqlEditor extends React.PureComponent {
@@ -271,7 +269,7 @@ class SqlEditor extends React.PureComponent {
onAltEnter={this.runQuery.bind(this)}
sql={this.props.queryEditor.sql}
tables={this.props.tables}
- height={((this.state.editorPaneHeight || defaultNorthHeight) - 50).toString()}
+ height={((this.state.editorPaneHeight || defaultNorthHeight) - 50) + 'px'}
/>
{this.renderEditorBottomBar()}
diff --git a/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
index 4f716d9a71..c890b5bf6e 100644
--- a/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
+++ b/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
@@ -19,7 +19,7 @@ const propTypes = {
queryEditors: PropTypes.array,
tabHistory: PropTypes.array.isRequired,
tables: PropTypes.array.isRequired,
- editorHeight: PropTypes.string.isRequired,
+ getHeight: PropTypes.func.isRequired,
};
const defaultProps = {
queryEditors: [],
@@ -193,7 +193,7 @@ class TabbedSqlEditors extends React.PureComponent {
{isSelected &&
(xt.queryEditorId === qe.id))}
queryEditor={qe}
editorQueries={this.state.queriesArray}
diff --git a/superset/assets/javascripts/SqlLab/main.less b/superset/assets/javascripts/SqlLab/main.less
index fd2e7f29a4..5a2b9b7f08 100644
--- a/superset/assets/javascripts/SqlLab/main.less
+++ b/superset/assets/javascripts/SqlLab/main.less
@@ -298,6 +298,11 @@ a.Link {
width: 100%;
overflow: scroll;
}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ padding-bottom: 8px;
+}
.search-date-filter-container {
display: flex;
diff --git a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx b/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
index ab00ee6272..739120f9be 100644
--- a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
+++ b/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx
@@ -15,7 +15,7 @@ describe('SqlEditor', () => {
latestQuery: queries[0],
tables: [table],
queries,
- height: '',
+ getHeight: () => ('100px'),
editorQueries: [],
dataPreviewQueries: [],
};
diff --git a/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx b/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx
index 0fef623409..35f8a45ee7 100644
--- a/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx
+++ b/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx
@@ -50,6 +50,7 @@ describe('TabbedSqlEditors', () => {
queryEditors: initialState.queryEditors,
tabHistory: initialState.tabHistory,
editorHeight: '',
+ getHeight: () => ('100px'),
};
const getWrapper = () => (
shallow(, {