diff --git a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx index b864c70e274c9..2ded35c8edc56 100644 --- a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx +++ b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx @@ -114,10 +114,9 @@ class AceEditorWrapper extends React.PureComponent { theme="github" onLoad={this.onEditorLoad.bind(this)} onBlur={this.onBlur.bind(this)} - minLines={8} - maxLines={30} + minLines={12} + maxLines={12} onChange={this.textChange.bind(this)} - height="200px" width="100%" editorProps={{ $blockScrolling: true }} enableLiveAutocompletion diff --git a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx index 5e2bbb23b4512..1a4e57fc8d509 100644 --- a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx +++ b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx @@ -34,6 +34,7 @@ class ResultSet extends React.PureComponent { searchText: '', showModal: false, data: [], + resultSetHeight: '0', }; } componentWillReceiveProps(nextProps) { @@ -51,6 +52,36 @@ class ResultSet extends React.PureComponent { this.fetchResults(nextProps.query); } } + componentWillMount() { + // hack to get height of result set table so it can be fixed and scroll in place + if (this.state.resultSetHeight === '0') { + // calculate result set table height + + // document.getElementById('brace-editor').getBoundingClientRect().height; + const sqlEditorHeight = 192; + + // document.getElementById('js-sql-toolbar').getBoundingClientRect().height; + const sqlToolbar = 30; + + // document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2; + const tabsHeight = 88; + + // document.getElementsByTagName('header')[0].getBoundingClientRect().height; + const headerHeight = 59; + + // this needs to be hardcoded since this element is in this component and has not mounted yet + const resultsControlsHeight = 30; + + const sum = + sqlEditorHeight + + sqlToolbar + + tabsHeight + + resultsControlsHeight + + headerHeight; + + this.setState({ resultSetHeight: window.innerHeight - sum - 95 }); + } + } getControls() { if (this.props.search || this.props.visualize || this.props.csv) { let csvButton; @@ -192,7 +223,7 @@ class ResultSet extends React.PureComponent { /> {this.getControls.bind(this)()} {sql} -