Graph in Tabs not extending to all screen

Dash Python
1

Hello,

when graphs are in tabs (using Bootstrap), the graphs in tabs not shown will not take the all screen as expected. The example below shows the issue. If the browser windows is changed, the graphs in the tab will take the proper full screen dimensions.

I tried to solve this in all ways but none were working.

Here is the code of an example:

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP])

fig = go.Figure(
data=[
go.Bar(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
350, 430, 474, 526, 488, 537, 500, 439],
name=‘Rest of world’,
),
],
)

tab1 = [
html.Br(),
dbc.Row(dbc.Col(dcc.Graph(figure=fig))),
]

tab2 = [
html.Br(),
dbc.Row(dbc.Col(dcc.Graph(figure=fig))),
]

body_rows = html.Div([
dbc.Tabs([
dbc.Tab(tab1, label=‘Tab1’),
dbc.Tab(tab2, label=‘Tab2’),
], active_tab=‘tab-1’),

])

body = dbc.Container([body_rows], fluid=False)

app.layout = html.Div([body])

if name == “main”:
app.run_server(debug=True)

Thanks for your help and congratulations for plotly and dash, you are making a wonderfull job.

Salvatore

2

Hey Salvatore,

dbc.Tabs works by creating a div for each of the tab’s contents, then hiding all but the selected tab by setting display=none on all the non-selected tabs. Unfortunately, it’s a known issue with the Graph component that when it’s initially rendered inside a hidden div, it’s unable to determine the correct width, and so when you unhide it, it won’t fill the screen. Check out this thread for some more discussion.

The best solution for you, is to dynamically render the tabs with a callback, which will recreate the graph with the correct dimensions each time the selected tab changes. Something like this

body_rows = html.Div([
    dbc.Tabs(
        [
            dbc.Tab(label="Tab 1", tab_id="tab-1"),
            dbc.Tab(label="Tab 2", tab_id="tab-2")
        ],
        id="tabs"
    ),
    html.Div(id="tab-content"),
])


@app.callback(
    Output("tab-content", "children"),
    [Input("tabs", "active_tab")],
)
def tab_content(active_tab):
    if active_tab == "tab-1":
        return tab1
    elif active_tab == "tab-2":
        return tab2
    # can return e.g. error message if neither of the above satisfied

Hope that helps.

3

Hi tcbegley,
thanks for your reply, it is clear and it helps a lot. I will try with callbacks, now I better understand the issue… I will have to implement a cache system to avoid the tab recalculating each time the data…
Thanks again,
Salvatore

1 Like