dash tabs not expanded when page loads

user_12618602 0
Viewed 435

I have a simple dash application with two tabs. One to show a graph and the other to carry some text. I see the tab in a collapsed state and to expand it, I have to click. Rather, I want the tab in an expanded state when it loads. Below is the code. I have tried specifying DIV tag height (code not included), but no luck. What Am I missing here? Appreciate your help. Thanks.

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(
    __name__,
    meta_tags=[{'name': 'Test'}],
)

layout_dashboard1 = html.Div(
    id="maindiv",
    children=[
        html.Div(children=[
            dcc.Tabs(id="tabs", value='tabs', children=[
                dcc.Tab(label='Tab 1', value='Tab 1',children=[
                        html.Div(
                            id="causal_card_graph",
                            children=[
                                dcc.Graph(id='graph1'),
                            ],
                        ),
                    ]),
                dcc.Tab(label='Tab 2', value='Tab 2', children=[html.Label("Test")]),
            ]),
        ]),
    ])

server=app.server
app.layout = layout_dashboard1

if __name__ == "__main__":
    app.run_server(debug=True)
plotly-dash tabs python
1 Answers

I had the same issue. To solve this you have to assign a value to your dcc.Tab that you want to be expanded. Then you assign this same value to the dcc.Tabs element. I called it tab-1-should-be-displayed in the code below.

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(
    __name__,
    meta_tags=[{'name': 'Test'}],
)

layout_dashboard1 = html.Div(
    id="maindiv",
    children=[
        html.Div(children=[
            dcc.Tabs(id="tabs", value='tab-1-should-be-displayed', children=[
                dcc.Tab(label='Tab 1', value='tab-1-should-be-displayed', children=[
                        html.Div(
                            id="causal_card_graph", 
                            children=[
                                dcc.Graph(id='graph1'),
                            ],
                        ),
                    ]),
                dcc.Tab(label='Tab 2', value='tab-2-should-be-displayed', children=[html.Label("Test")]),
            ]),
        ]),
    ])

server=app.server
app.layout = layout_dashboard1

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

user_56211830
Related