diff --git a/superset/assets/javascripts/chart/Chart.jsx b/superset/assets/javascripts/chart/Chart.jsx index cc18bb4fe69..0e064278f5c 100644 --- a/superset/assets/javascripts/chart/Chart.jsx +++ b/superset/assets/javascripts/chart/Chart.jsx @@ -20,6 +20,7 @@ const propTypes = { containerId: PropTypes.string.isRequired, datasource: PropTypes.object.isRequired, formData: PropTypes.object.isRequired, + headerHeight: PropTypes.number, height: PropTypes.number, width: PropTypes.number, setControlValue: PropTypes.func, @@ -63,6 +64,7 @@ class Chart extends React.PureComponent { this.getFilters = this.getFilters.bind(this); this.clearFilter = this.clearFilter.bind(this); this.removeFilter = this.removeFilter.bind(this); + this.headerHeight = this.headerHeight.bind(this); this.height = this.height.bind(this); this.width = this.width.bind(this); } @@ -129,6 +131,10 @@ class Chart extends React.PureComponent { return this.props.width || this.container.el.offsetWidth; } + headerHeight() { + return this.props.headerHeight || 0; + } + height() { return this.props.height || this.container.el.offsetHeight; } diff --git a/superset/assets/javascripts/dashboard/components/GridCell.jsx b/superset/assets/javascripts/dashboard/components/GridCell.jsx index 2ae9ea49c06..91fe83943ba 100644 --- a/superset/assets/javascripts/dashboard/components/GridCell.jsx +++ b/superset/assets/javascripts/dashboard/components/GridCell.jsx @@ -73,16 +73,21 @@ class GridCell extends React.PureComponent { height(slice) { const widgetHeight = this.props.widgetHeight; - const headerId = this.getHeaderId(slice); + const headerHeight = this.headerHeight(slice); const descriptionId = this.getDescriptionId(slice); - const headerHeight = this.refs[headerId] ? this.refs[headerId].offsetHeight : 30; let descriptionHeight = 0; if (this.props.isExpanded && this.refs[descriptionId]) { descriptionHeight = this.refs[descriptionId].offsetHeight + 10; } + return widgetHeight - headerHeight - descriptionHeight; } + headerHeight(slice) { + const headerId = this.getHeaderId(slice); + return this.refs[headerId] ? this.refs[headerId].offsetHeight : 30; + } + render() { const { isExpanded, isLoading, isCached, cachedDttm, @@ -130,6 +135,7 @@ class GridCell extends React.PureComponent { chartKey={chartKey} datasource={datasource} formData={formData} + headerHeight={this.headerHeight(slice)} height={this.height(slice)} width={this.width()} timeout={timeout} diff --git a/superset/assets/visualizations/markup.js b/superset/assets/visualizations/markup.js index 8b437162e22..193eb4d65f1 100644 --- a/superset/assets/visualizations/markup.js +++ b/superset/assets/visualizations/markup.js @@ -9,6 +9,13 @@ function markupWidget(slice, payload) { overflow: 'auto', }); + // markup height is slice height - (marginTop + marginBottom) + let iframeHeight = slice.height() - 20; + if (slice.props.vizType === 'separator') { + // separator height is the entire chart container: slice height + header + iframeHeight = slice.height() + slice.headerHeight(); + } + const iframeId = `if__${slice.containerId}`; const html = ` @@ -22,7 +29,7 @@ function markupWidget(slice, payload) { jqdiv.html(` `);