Incorrect height of Components on non-active tabs (Bootstrap)

Dash Python
1

Hello,

I am using Dash (1.9.1) with dash-bootstrap-components (0.9.1) in Python (3.8.2, x64). My dashboard consists of multiple tabs with different components. However, only the components of the active tab (on loading the page) have the correct height. The height of the components on the other tabs is too small.

Example:

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc

app2 = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

tab_content = dict()
tab_title = dict()

tab_name = 'nav-taba'
tab_title[tab_name] = 'Tab A'

tab_content[tab_name] = dbc.Card(
    dbc.CardBody([
        dbc.Row([
            dbc.Col(dcc.Graph(id='nav-taba-graph1'), width=4)
        ])
    ]),
    className="mt-0",
)

tab_name = 'nav-tabb'
tab_title[tab_name] = 'Tab B'

tab_content[tab_name] = dbc.Card(
    dbc.CardBody([
        dbc.Row([
            dbc.Col(dcc.Graph(id='nav-tabb-graph1'), width=4),
            dbc.Col(dcc.Graph(id='nav-tabb-graph2'), width=4),
            dbc.Col(dcc.Graph(id='nav-tabb-graph3'), width=4)
        ])
    ]),
    className="mt-0",
)

app2.layout = dbc.Container([

    dbc.Tabs(id="nav",
             active_tab='nav-taba',
             children=[dbc.Tab(tab_content[name],
                               label=title,
                               tab_id=name) for name, title in tab_title.items()])
],
fluid=True)




if __name__ == '__main__':
    app2.run_server(debug=True)

The graph on Tab A (active_tab) has the correct height:

Screenshot_2020-03-26 Dash
Screenshot_2020-03-26 Dash809×450 1.94 KB

While the graphs on Tab B do not:

Screenshot_2020-03-26 Dash1
Screenshot_2020-03-26 Dash1809×100 834 Bytes

How can I fix this problem?

2

This is because the non-active tabs are hidden by setting the style display:none, and the dcc.Graph can’t determine the height of its container as a result. There’s some related discussion here and here

You can work around this by dynamically rendering the tab content with a callback. Check out this example.

1 Like
3

Thank you for the explanation - I will try to render the tab content dynamically.

4

The easiest solution to this is to set the height of your figure in the callback function where you populate it with data.

In python:
fig.update_layout(height=500)

If you try dynamically rendering your tab then you run into callback issues if you have buttons within the tab. If you render a tab inside a function call then the buttons inside that function call cannot be assigned as Input for other callback functions. I’m fairly new to dash, so maybe there is a way to do this…

5

Hey @kvotheTHEinquisitor

The usual way to get around the problem is to set suppress_callback_exceptions=True when creating the app, which allows you to assign callbacks to components that aren’t initially in the layout when the app starts up.

app = dash.Dash(..., suppress_callback_exceptions=True)
6

Thanks @tcbegley for this tip! Opens up a new ways to set up the app. :slightly_smiling_face: