diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-bottom-panel.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-bottom-panel.jsx index 2ac88d707..1a36281f3 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-bottom-panel.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-bottom-panel.jsx @@ -23,6 +23,7 @@ import Logger from "../logging/canvas-logger.js"; // plus the minimum allowed height for the canvas which is 150px. const MARGIN_TOP = 200; const MIN_HEIGHT = 75; +const TOP_PANEL_CLASSNAME = "top-panel"; class CanvasBottomPanel extends React.Component { constructor(props) { @@ -64,12 +65,20 @@ class CanvasBottomPanel extends React.Component { // a minimum and maximum height. limitHeight(ht) { const containingDiv = document.getElementById(this.props.containingDivId); + const topPanelDiv = document.getElementsByClassName(TOP_PANEL_CLASSNAME); let height = ht; + let topPanelHeight = 0; + + // Consider top panel height while calculating maxHeight to disable scroll + // in right flyout. + if (topPanelDiv.length > 0) { + topPanelHeight = topPanelDiv[0].getBoundingClientRect().height; + } // containingDiv may not be available in some test situations if (containingDiv) { const containingDivHt = containingDiv.getBoundingClientRect().height; - const maxHeight = containingDivHt - MARGIN_TOP; + const maxHeight = containingDivHt - MARGIN_TOP - topPanelHeight; height = Math.min(Math.max(height, MIN_HEIGHT), maxHeight); } return height;