dcc.Graph isn't inheriting height from parent div

[luggie]

ddc.Graph isn't inheriting height from parent div as it does with width. This happens even when responsive = True is set.

dash versions:

dash                               1.16.3                      
dash-bootstrap-components          0.10.7                      
dash-core-components               1.12.1                      
dash-dangerously-set-inner-html    0.0.2                       
dash-daq                           0.5.0                       
dash-html-components               1.1.1                       
dash-renderer                      1.8.2                       
dash-table                         4.10.1                      
dash-ui                            0.4.0  

Minimal code example: https://community.plotly.com/t/js-onresize-event-listener-for-toast-not-working/47670

[celia-lm]

If the dcc.Graph is initially empty and populated with a callback, the graph may be covered by other components until the window is resized (which will trigger a resizing event). This doesn't happen if responsive=False.

Screen.Recording.2024-04-25.at.19.36.49.mov

Env:

dash==2.16.1
plotly==5.21.0

Code to replicate the issue:

from dash import Dash, html, dcc, callback, Output, Input
import plotly.graph_objects as go
from time import sleep

app = Dash()

RESPONSIVE = True

app.layout = html.Div(
    [
        dcc.Graph(
            figure=go.Figure(data=go.Bar(y=[2, 3, 1], marker_color="pink")),
            id="g1",
            responsive=RESPONSIVE,
        ),
        dcc.Graph(
            id="g2",
            responsive=RESPONSIVE,
        ),
        dcc.Graph(
            figure=go.Figure(data=go.Bar(y=[2, 3, 1], marker_color="blue")),
            id="g3",
            responsive=RESPONSIVE,
        ),
        html.Div(id="container")
    ]
)

@callback(Output("g2", "figure"), Input("container", "id"))
def update(id):
    sleep(3)
    return go.Figure(data=go.Bar(y=[2, 3, 1], marker_color="yellow"))
 
app.run(debug=True)

Tested workarounds (that don't work)

• Adding style={'height':'100%'} to dcc.Graph()
• Assets folder with .css file like:

.dash-graph {
    height : 100%;
}

[T4rk1n]

Closed by #1906