Merge pull request #5596 from SharadhNaidu/fix-5591-responsive-html-height

camdecoster · web-flow · commit 43bc90fd5fa9 · 2026-06-01T15:06:14.000-06:00
Fix to_html responsive height by styling outer wrapper div
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Use presence of `COLAB_NOTEBOOK_ID` env var to enable Colab renderer instead of testing import of `google.colab` [[#5473](https://github.com/plotly/plotly.py/pull/5473)], with thanks to @kevineger for the contribution!
 - Update tests to be compatible with numpy 2.4 [[#5522](https://github.com/plotly/plotly.py/pull/5522)], with thanks to @thunze for the contribution!
 - Add default headers to be passed in to Kaleido v1.3.0 to avoid blocked Open Street Map tiles [#5588](https://github.com/plotly/plotly.py/pull/5588)]
+- Propagate the requested `default_height`/`default_width` to the outer wrapper div produced by `to_html` so that responsive (percentage) dimensions inherit from a sized parent container instead of collapsing to the plotly.js 450px fallback [[#5591](https://github.com/plotly/plotly.py/issues/5591)], with thanks to @SharadhNaidu for the contribution!
 
 ### Updated
 - The `__eq__` method for  `graph_objects` classes now returns `NotImplemented` to give the other operand an opportunity to handle the comparison [[#5547](https://github.com/plotly/plotly.py/pull/5547)], with thanks to @RazerM for the contribution!
diff --git a/plotly/io/_html.py b/plotly/io/_html.py
@@ -318,11 +318,11 @@ def to_html(
         )
 
     plotly_html_div = """\
-<div>\
+<div style="height:{height}; width:{width};">\
         {mathjax_script}\
         {load_plotlyjs}\
             <div id="{id}" class="plotly-graph-div" \
-style="height:{height}; width:{width};"></div>\
+style="height:100%; width:100%;"></div>\
             <script>\
                 window.PLOTLYENV=window.PLOTLYENV || {{}};{base_url_line}\
                 {script};\
diff --git a/tests/test_core/test_offline/test_offline.py b/tests/test_core/test_offline/test_offline.py
@@ -278,7 +278,7 @@ def test_div_output(self):
 
         self.assertNotIn("<html>", html)
         self.assertNotIn("</html>", html)
-        self.assertTrue(html.startswith("<div>") and html.endswith("</div>"))
+        self.assertTrue(html.startswith("<div") and html.endswith("</div>"))
 
     def test_config(self):
         config = dict(linkText="Plotly rocks!", showLink=True, editable=True)
diff --git a/tests/test_io/test_html.py b/tests/test_io/test_html.py
@@ -53,6 +53,53 @@ def test_cdn_includes_integrity_attribute(fig1):
     assert match is not None, "CDN script tag with integrity attribute not found"
 
 
+def test_outer_wrapper_carries_requested_dimensions(fig1):
+    """
+    Regression test for https://github.com/plotly/plotly.py/issues/5591.
+
+    The outer wrapper div produced by ``to_html`` must carry the requested
+    height/width so that percentage values propagate from a parent container
+    down to the figure element. Without this, a default of ``height='100%'``
+    collapses to zero (because the wrapper has no height) and plotly.js falls
+    back to its hardcoded 450px, breaking any responsive layout.
+    """
+    html = pio.to_html(fig1, include_plotlyjs="cdn", full_html=False)
+
+    wrapper_match = re.match(r'<div style="([^"]+)">', html)
+    assert wrapper_match is not None, (
+        "Outer wrapper div is missing inline style; responsive parents cannot "
+        "propagate dimensions to the figure."
+    )
+    wrapper_style = wrapper_match.group(1)
+    assert "height:100%" in wrapper_style
+    assert "width:100%" in wrapper_style
+
+    inner_match = re.search(
+        r'<div id="[^"]+" class="plotly-graph-div" style="([^"]+)">',
+        html,
+    )
+    assert inner_match is not None
+    assert "height:100%" in inner_match.group(1)
+    assert "width:100%" in inner_match.group(1)
+
+
+def test_outer_wrapper_respects_explicit_pixel_dimensions(fig1):
+    """Explicit pixel dimensions must reach the outer wrapper unchanged."""
+    html = pio.to_html(
+        fig1,
+        include_plotlyjs="cdn",
+        full_html=False,
+        default_width=600,
+        default_height=400,
+    )
+
+    wrapper_match = re.match(r'<div style="([^"]+)">', html)
+    assert wrapper_match is not None
+    wrapper_style = wrapper_match.group(1)
+    assert "height:400px" in wrapper_style
+    assert "width:600px" in wrapper_style
+
+
 def test_cdn_integrity_hash_matches_bundled_content(fig1):
     """Test that the SRI hash in CDN script tag matches the bundled plotly.js content"""
     html_output = pio.to_html(fig1, include_plotlyjs="cdn")
diff --git a/tests/test_io/test_renderers.py b/tests/test_io/test_renderers.py
@@ -307,7 +307,7 @@ def test_repr_html(renderer):
     sri_hash = _generate_sri_hash(plotlyjs_content)
 
     template = (
-        "<div>                        <script>"
+        '<div style="height:100%; width:100%;">                        <script>'
         "window.PlotlyConfig = {MathJaxConfig: 'local'};</script>\n        "
         '<script charset="utf-8" src="'
         + plotly_cdn_url()
