inconsistent behavior of responsive graph heights

[alexcjohnson]

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.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = 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"),
)
def clone_figure(_):
    return fig, True


if __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).