From f821b3a4e96551afca341c541b10e9e2d30ade12 Mon Sep 17 00:00:00 2001
From: Samuel Hinshaw <samuel.hinshaw@plot.ly>
Date: Fri, 13 Dec 2024 16:16:36 -0800
Subject: [PATCH 1/3] set the plotly-container div to full width & height
---
src/plot_api/plot_api.js | 10 +++++++++-
src/plot_api/subroutines.js | 8 ++++++++
2 files changed, 17 insertions(+), 1 deletion(-)
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index e82bd29ebc1..e9f7b2788fe 100644
--- a/src/plot_api/plot_api.js
+++ b/src/plot_api/plot_api.js
@@ -3704,7 +3704,15 @@ 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.
+ .style({
+ width: "100%",
+ height: "100%"
+ });
// Make the svg container
fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([0]);
diff --git a/src/plot_api/subroutines.js b/src/plot_api/subroutines.js
index f7fc8850c23..28af5ea2ee4 100644
--- a/src/plot_api/subroutines.js
+++ b/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'
From 8596cc364e66f6948a0ff508aa406e0498ee93c1 Mon Sep 17 00:00:00 2001
From: Samuel Hinshaw <samuel.hinshaw@plot.ly>
Date: Fri, 13 Dec 2024 16:45:15 -0800
Subject: [PATCH 2/3] expand on comment
---
src/plot_api/plot_api.js | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index e9f7b2788fe..75e98f541ae 100644
--- a/src/plot_api/plot_api.js
+++ b/src/plot_api/plot_api.js
@@ -3708,7 +3708,17 @@ function makePlotFramework(gd) {
// 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.
+ // 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%"
From 98b66a8d85fbdbb790952101f900679e3c5e446c Mon Sep 17 00:00:00 2001
From: Samuel Hinshaw <samuel.hinshaw@plot.ly>
Date: Fri, 13 Dec 2024 17:14:23 -0800
Subject: [PATCH 3/3] add changelog entry
---
draftlogs/7314_fix.md | 1 +
1 file changed, 1 insertion(+)
create mode 100644 draftlogs/7314_fix.md
diff --git a/draftlogs/7314_fix.md b/draftlogs/7314_fix.md
new file mode 100644
index 00000000000..7534de98a3d
--- /dev/null
+++ b/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)]