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 b6525de83..2ac88d707 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 @@ -19,7 +19,9 @@ import PropTypes from "prop-types"; import { connect } from "react-redux"; import Logger from "../logging/canvas-logger.js"; -const MARGIN_TOP = 100; +// Margin must be equal to or greater than the toolbar height +// plus the minimum allowed height for the canvas which is 150px. +const MARGIN_TOP = 200; const MIN_HEIGHT = 75; class CanvasBottomPanel extends React.Component { @@ -61,13 +63,13 @@ class CanvasBottomPanel extends React.Component { // Returns a new height for the bottom panel limited by the need to enforce // a minimum and maximum height. limitHeight(ht) { - const canvasContainer = document.getElementById(this.props.containingDivId); + const containingDiv = document.getElementById(this.props.containingDivId); let height = ht; - // canvasContainer may not be available in some test situations - if (canvasContainer) { - const canvasHeight = canvasContainer.getBoundingClientRect().height; - const maxHeight = canvasHeight - MARGIN_TOP; + // containingDiv may not be available in some test situations + if (containingDiv) { + const containingDivHt = containingDiv.getBoundingClientRect().height; + const maxHeight = containingDivHt - MARGIN_TOP; height = Math.min(Math.max(height, MIN_HEIGHT), maxHeight); } return height; diff --git a/canvas_modules/harness/cypress/e2e/canvas/bottom-panel.cy.js b/canvas_modules/harness/cypress/e2e/canvas/bottom-panel.cy.js index 2e944b015..b6a2dd042 100644 --- a/canvas_modules/harness/cypress/e2e/canvas/bottom-panel.cy.js +++ b/canvas_modules/harness/cypress/e2e/canvas/bottom-panel.cy.js @@ -41,14 +41,14 @@ describe("Testing bottom panel", function() { it("Testing bottom panel max height", function() { // Test bottom panel does not exceed max-size successfully cy.moveBottomPanelDivider(50); - cy.verifyBottomPanelHeight(650); + cy.verifyBottomPanelHeight(550); }); it("Testing bottom panel max height with rightFlyout open", function() { // Test bottom panel does not exceed max-size successfully with the right flyout open cy.setCanvasConfig({ "selectedShowRightFlyout": true }); cy.moveBottomPanelDivider(50); - cy.verifyBottomPanelHeight(650.1281127929688); + cy.verifyBottomPanelHeight(550.1281127929688); cy.verifyBottomPanelWidth(1028); });