Skip to content

Some plotly figures stopped being responsive when changing browser zoom level [dash>=3.0] #3260

Closed
@njcruzln

Description

@njcruzln

After upgrading from dash 2.17 | 2.18 to 3.0 certain figures stopped automatically updating their size (style.height and style.width) when changing the browser zoom level. See attached images below. In these images the ag-grid (top-left) and the figure within dbc.Tabs (bottom-right) corner are unaffected (unsure why).

dash==2.17.1 (Browser Zoom 50%)
Image

dash==3.0.1 (Browser Zoom 50%)
Image

In dash<3.0 the figure's .plot-container .svg-container and relevant children automatically update width and height to allow the figure to match the size of a responsive container (e.g. dbc.Col). In dash>=3.0 the width and height of these html components are static. See attached images below where I inspect the map figure (bottom-left in the previous images)

dash==2.17.1 (Browser Zoom 75%)
Image

dash==3.0.1 (Browser Zoom 75%)
Image

Other relevant info:

  • Working build: dash==2.17.1 + dash-bootstrap-components==1.6.0 + plotly==5.23.0; Upgrading to dash==2.18 and/or dbc==2.0 and/or plotly==5.24 does not introduce the issue.
  • Broken build: dash==3.0.1 + dash-bootstrap-components==2.0.0 + plotly==5.24.0; Upgrading to Dash==3.0.2 and/or plotly>=6.0 does not fix the issue. Downgrading to plotly==5.23.0 does not fix the issue.

Based on what I've gathered, dash 3.0 introduces the issue.

Let me know if you need any other information. Thanks for the work you put into dash!

Metadata

Metadata

Assignees

Labels

P2considered for next cyclebugsomething brokenregressionthis used to work

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions