Merge pull request #7314 from plotly/bugfix/backport-set-container-height

[Bugfix Backport] Fix Container Height

Author: archmoj

draftlogs/7314_fix.md

@@ -0,0 +1 @@
+- Set height and width on the `.plotly-container` div to 100% [[#7314](https://github.com/plotly/plotly.js/pull/7314)]

src/plot_api/plot_api.js

@@ -3704,7 +3704,25 @@ function makePlotFramework(gd) {
     fullLayout._container.enter()
         .insert('div', ':first-child')
         .classed('plot-container', true)
-        .classed('plotly', true);
+        .classed('plotly', true)
+        // The plot container should always take the full with the height of its
+        // parent (the graph div). This ensures that for responsive plots
+        // without a height or width set, the paper div will take up the full
+        // height & width of the graph div. 
+        // So, for responsive plots without a height or width set, if the plot
+        // container's height is left to 'auto', its height will be dictated by
+        // its childrens' height. (The plot container's only child is the paper
+        // div.) 
+        // In this scenario, the paper div's height will be set to 100%,
+        // which will be 100% of the plot container's auto height. That is
+        // meaninglesss, so the browser will use the paper div's children to set
+        // the height of the plot container instead. However, the paper div's
+        // children do not have any height, because they are all positioned
+        // absolutely, and therefore take up no space.
+        .style({
+            width: "100%",
+            height: "100%"
+        });
 
     // Make the svg container
     fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([0]);

src/plot_api/subroutines.js

@@ -52,6 +52,14 @@ function lsInner(gd) {
     var axList = Axes.list(gd, '', true);
     var i, subplot, plotinfo, ax, xa, ya;
 
+    // Set the width and height of the paper div ('.svg-container') in
+    // accordance with the users configuration and layout. 
+    // If the plot is responsive and the user has not set a width/height, then
+    // the width/height of the paper div is set to 100% to fill the parent
+    // container. 
+    // We can't leave the height or width unset because all of the contents of
+    // the paper div are positioned absolutely (and will therefore not take up
+    // any space).
     fullLayout._paperdiv.style({
         width: (gd._context.responsive && fullLayout.autosize && !gd._context._hasZeroWidth && !gd.layout.width) ? '100%' : fullLayout.width + 'px',
         height: (gd._context.responsive && fullLayout.autosize && !gd._context._hasZeroHeight && !gd.layout.height) ? '100%' : fullLayout.height + 'px'