Dash objects reset their height to 450px after changing tabs

[gtg489p]

This problem started after I upgraded to dash 1.19.0 (possibly a dash-core-components 1.15.0 issue??)

I have an app with multiple tabs, with dash components on them like charts and indicators. I set the component heights using update_layout. When I first load the page, everything looks fine. But when I click on a different tab, and then go back to the previous tab, all the dash charts and indicators change their height to 450px. The indicators are set in my code to be 200px, and when they snap to 450px after changing tabs, the indicators components themselves stretch outside of their containing DIVs.

Can confirm this was not an issue in Dash 1.16 and was recently introduced.

As well as getting this on a backlog for a fix in future release, I'm also interested if anyone has a clever workaround to prevent this right now while using the current dash version.

Thanks,
Nathan

[alexcjohnson]

Thanks for the report @gtg489p - can you make a self-contained example app that shows the problem? There are a number of ways to set sizes so it's important that we're talking about the same thing.

[gtg489p]

I can try for a full fledged example when time allows, but for the time being - to address your specific concern, here is how I set the height of the figures in my python code

fig.update_layout(height=200)

It is set once at initialization, and no callbacks ever touch it again.

Thanks,
Nathan

[AnnMarieW]

Here is a small app that shows the problem. It's a new issue in 1.19.0. It works fine in 1.18.1

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import pandas as pd


external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.DataFrame(
    {
        "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
        "Amount": [4, 1, 2, 2, 4, 5],
        "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"],
    }
)

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
fig.update_layout(height=200)


tab1 = html.Div([html.H3("Tab content 1"), dcc.Graph(id="example-graph1", figure=fig)])
tab2 = html.Div([html.H3("Tab content 2"), dcc.Graph(id="example-graph2", figure=fig)])

app.layout = html.Div(
    [
        dcc.Tabs(
            id="tabs",
            value="tab-1",
            children=[
                dcc.Tab(label="Tab one", value="tab-1", children=tab1),
                dcc.Tab(label="Tab two", value="tab-2", children=tab2),
            ],
        ),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)

[alexcjohnson]

Thanks @gtg489p and @AnnMarieW - moved to dcc as that's ultimately where the problem is. This is probably a result of #905

[AnnMarieW]

Hey @gtg489p

A workaround is to add the height in the style parameter of dcc.Graph:
This works with 1.19.0

tab1 = html.Div(
    [
        html.H3("Tab content 1"),
        dcc.Graph(id="example-graph1", figure=fig, style={"height": 200})
    ]
)

[gtg489p]

Thanks @AnnMarieW , I'll see to using that in the mean time (changed 200 to "200px")

Off topic, but how did you create that gif illustrating the bug? I know there are gif maker programs out there but just wondering if there's a commonly accepted way. Thanks

[AnnMarieW]

@gtg489p Happy to help :-)

I'm not sure about the commonly accepted way to make a gif, but on Linux I use Peek and on Windows I used ScreenToGif. Both are pretty simple, which makes them easy to use.

[ppfreitas]

Any other workaround on this? Setting the height in the dcc.Graph does not work for me as I want to have different dcc.Graph and figure heights (and using 'overflowY': 'scroll').

[nhoover]

@ann-marie-ward thanks for this workaround. It works for me but is clunky to have to specify the height by style when my dcc.Graph objects (a plotly Table and a line_mapbox) already specify height via their height parameters.

In my case, my two tabs initially render correctly, click to the second one, good. Click back to the first, and the height changes to 450px. This is using 1.21. If I add your style parameter to both dcc.Graph objects, it works correctly.

[Admolly]

Experiencing the same problem as ppfreitas. Having another workaround/fix would be nice!

[mcsewhoy]

Same problem here! The workaround works well though, thanks @AnnMarieW . But a fix would be good since now I am styling both the figure and graph in two places, when one should be enough

[jo47011]

Is this issue solved in Dash 2.x?

[daviddavo]

No, it's still not solved