Graph at 50% width on page load, goes to 100% when redrawing

@dmhv wrote:

Description

I’ve created the dashboard layout using Dash Bootstrap Components, and one Tab is behaving weirdly.

When I open the app for the first time, it looks like this:

dash_on_load.png1914×705 70.6 KB

And when the window is redrawn (which can be triggered by resizing the browser window, changing the zoom level, or even opening browser’s dev tools) it starts looking like this (which is what I ultimately want it to look):

dash_after_resize.png1893×684 101 KB

Any hints on what can be done to have the figure at 100% width on page load?

Code bits

• layout part defining the graph above:

dbc.Row(dbc.Col(width=12, children=dbc.Card(className="w-100", children=[
    dbc.CardHeader(html.H5("Predefined graphs")),
    dbc.CardBody([
        dcc.Graph(
            id='graph_predefined',
            figure={}
        )
    ]),
])))

I’m seeing the exact same behavior if I remove the Row/Col definitions and keep just the dbc.Card(...). Embedding the dbc.Card() into a html.Div(..., style={'width': '100%'}) doesn’t help either.

• part of the callback updating the figure:

fig = make_subplots(
    rows=n_rows,
    cols=n_cols,
    shared_xaxes=True,
    shared_yaxes=False,
    vertical_spacing=0.3/n_rows,
    subplot_titles=plot_names,
    specs=[[{"secondary_y": True}, {"secondary_y": True}],
           [{"secondary_y": True}, {"secondary_y": True}]]
)

fig["layout"].update(
    height=header_margin + 250*n_rows + 250*0.3*(n_rows-1),
    autosize=True,
    showlegend=True,
    margin=go.layout.Margin(l=50, r=50, b=50, t=header_margin, pad=50),
    template="plotly_white",
)

Further on I’m only adding traces to the subplots, no layout modifications are performed.

Context

dash                              1.3.0
dash-bootstrap-components         0.7.1
dash-core-components              1.2.0
dash-html-components              1.0.1
dash-renderer                     1.1.0
dash-table                        4.3.0

Posts: 2

Participants: 2

Read full topic