✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Graph is squashed in collapsible (Details/Summary) element

I want to put a graph in a collapsible element made out of a html.Details and html.Summary element. This works however the graph gets completely squashed vertically such that the graph is not visible. I read some related articles about adding a resize2 function in a exernal javascript file and tried to let that resizing2 function be triggered on opening the collapsible Summary element but that didn’t work, nothing happened…

Is there any other way to trigger a resizing of the height of the graph? My code structure looks as follows (sorry I couldn’t get the indentation right):

html.Div(
html.Details([
html.Summary(‘Collapsible’,
style={‘fontSize’: 20},
id=‘summary_button’),
html.Div(
[html.H6(children=[“TEXT”]),
html.P(“TEXT”, id=‘testp’)],
className=“four columns”
),
html.Div(
[html.H6(children=“GRAPH”),
dcc.Loading(
id=‘loading_graph’,
type=‘default’,
color=’#fca103’,
children=[dcc.Graph(id=“graph”, responsive=True)]
)],
className=“eight columns”,
),
]),
className=“pretty_container twelve columns”
)

I have a similar problem and it was recommended to me that I set the figure height. This prevents the problem about 90% of the time but I still think an underlying bug exists somewhere.

That actually worked! Thanks @flyingcujo

excellent! glad it worked out for you