Graph in Tabs not extending to all screen

Dash Python
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.