Strange things happen if you attempt to use responsive just to let the graph width adjust to the window, no CSS to set the height. I'm reporting it here since ultimately it's the dcc behavior we're most interested in, but I suspect most of the fix for this will need to go in plotly.js, since the most problematic behavior (hiding content behind the graph) involves div.svg-container, several layers inside the div.js-plotly-plot, having the wrong CSS applied to it.
The app below, which sets both the responsive and figure props in a callback with an explicit height in the figure, ends up after the initial callback setting the graph container to zero height, even though the graph itself gets the height given in layout.height - so subsequent content is hidden behind the graph.
There's supposed to be a button there - but it's hiding behind the graph. If you resize the window, the graph container also gets the height from layout.height and the button appears.
importdashimportdash_core_componentsasdccimportdash_html_componentsashtmlfromdash.dependenciesimportInput, Outputapp=dash.Dash(__name__)
fig= {"data": [], "layout": {"width": 300, "height": 300}}
app.layout=html.Div(
[
dcc.Graph(id="graph", figure=fig),
html.Br(),
html.Button(id="button", children="Clone figure"),
]
)
@app.callback(Output("graph", "figure"),Output("graph", "responsive"),Input("button", "n_clicks"),)defclone_figure(_):
returnfig, Trueif__name__=="__main__":
app.run_server(debug=True)Discovered in a test for #905
Other weird behavior: If the graph in the initial layout already has responsive=True it will disregard layout.height and use the default height (450px) for the graph and its container. And then if you give the graph a new figure in a callback (leaving responsive unchanged) the graph keeps its height but the container LOSES its height and subsequent content disappears behind the graph.
The docs for responsive: True say:
True forces the graph to be responsive to window and parent resize, regardless of any other specifications in figure.layout or config
Seems to me when there's no CSS specifying the height, only layout.height, the only way this can be interpreted that isn't history-dependent is to ignore layout.height and use the default height (450px). Given the strange symptoms here I'm worried that will be difficult if we've already drawn the graph with a different size (when responsive was off), but we should certainly be able to avoid hiding content. As mentioned at the top, the problem is with div.svg-container: when it has height: 100% and nothing outside it sets a height, that gets interpreted as zero. After resizing the window though, this element gets an explicit height matching the pixel height of the graph (be it the 450px default or the 300px set in the layout here).
Strange things happen if you attempt to use
responsivejust to let the graph width adjust to the window, no CSS to set the height. I'm reporting it here since ultimately it's the dcc behavior we're most interested in, but I suspect most of the fix for this will need to go in plotly.js, since the most problematic behavior (hiding content behind the graph) involvesdiv.svg-container, several layers inside thediv.js-plotly-plot, having the wrong CSS applied to it.The app below, which sets both the
responsiveandfigureprops in a callback with an explicit height in the figure, ends up after the initial callback setting the graph container to zero height, even though the graph itself gets the height given inlayout.height- so subsequent content is hidden behind the graph.There's supposed to be a button there - but it's hiding behind the graph. If you resize the window, the graph container also gets the height from
layout.heightand the button appears.Discovered in a test for #905
Other weird behavior: If the graph in the initial layout already has
responsive=Trueit will disregardlayout.heightand use the default height (450px) for the graph and its container. And then if you give the graph a new figure in a callback (leavingresponsiveunchanged) the graph keeps its height but the container LOSES its height and subsequent content disappears behind the graph.The docs for
responsive: Truesay:Seems to me when there's no CSS specifying the height, only
layout.height, the only way this can be interpreted that isn't history-dependent is to ignorelayout.heightand use the default height (450px). Given the strange symptoms here I'm worried that will be difficult if we've already drawn the graph with a different size (whenresponsivewas off), but we should certainly be able to avoid hiding content. As mentioned at the top, the problem is withdiv.svg-container: when it hasheight: 100%and nothing outside it sets a height, that gets interpreted as zero. After resizing the window though, this element gets an explicit height matching the pixel height of the graph (be it the 450px default or the 300px set in the layout here).