rory
August 21, 2018, 10:29am
1
I’m trying to create two tabs with two subtabs each in Dash but I’m having problems.
Here is my code:
import dash
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash()
# Create a Dash layout
app.layout = html.Div([
html.Div(
html.H1('My Dashboard')
),
dcc.Tabs(id="tabs", value='Tab1', children=[
dcc.Tab(label='Tab 1', id='tab1', value='Tab1', children =[
dcc.Tabs(id="subtabs1", value='Subtab1', children=[
dcc.Tab(label='Sutab 1', id='subtab1', value='Subtab1'),
dcc.Tab(label='Sutab 2', id='subtab2', value='Subtab2'),
]),
]),
dcc.Tab(label='Tab 2', id='tab2', value= 'Tab2', children=[
dcc.Tabs(id="subtabs2", value='Subtab4', children=[
dcc.Tab(label='Sutab 4', id='subtab4', value='Subtab4'),
dcc.Tab(label='Sutab 5', id='subtab5', value='Subtab5'),
]),
])
])
])
if __name__ == '__main__':
app.run_server(debug=True)
When I run this application the subtabs in the first tab work as expected. However, I can’t navigate to any subtabs in the second tab. Why is this happening? Any help would be appreciated. Thank you.
Thanks for reporting! This seems like a bug. Would you mind reposting this as an issue in https://github.com/plotly/dash-core-components/ ?
It may be related to https://github.com/plotly/dash-core-components/issues/256 . In the meantime, could you try the “Method 1: Content as Callback” in the docs? https://dash.plot.ly/dash-core-components/tabs
rory
August 21, 2018, 2:20pm
4
I tried it and there’s still a bug.
rory:
I tried it
Could you post a simple, reproducable example of what you tried? That’d help us debug the issue
rory
August 21, 2018, 8:48pm
7
I reported the issue and provided the example you asked for: https://github.com/plotly/dash-core-components/issues/272
1 Like
keval
August 1, 2020, 6:42am
8
@chriddyp @rory Was this issue resolved? I am running into a similar problem with loading subtab content.
(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
opened 06:34AM - 01 Aug 20 UTC
closed 07:19AM - 01 Aug 20 UTC
I am receiving this error when I attempt to load a subtab.
My file structure… looks something like this:
```
index.py
app.py
- Tabs
--- portfolio.py
--- leads.py
--- spaces.py
--- revenue.py
--- comps.py
--- analysis.py
--- deal.py
```
App Layout / Tab-subtab structure
```
app.layout = html.Div([
# tabs
html.Div([
dcc.Tabs(
id="tabs",
vertical=True,
className="mb-3",
style={"height":"60", "verticalAlign":"middle", "font-size":"0.9375rem"},
children=[
dcc.Tab(label="Portfolio", value="portfolio_tab"),
dcc.Tab(label="Smart Leads", value="market_tab"),
dcc.Tab(label="Spaces", value="reporting_tab"),
dcc.Tab(label="Revenue", value="revenue_tab",
children=[dcc.Tabs(id="subtabs", style={"margin-left":"50px"},
children=[dcc.Tab(label='Comps', value='comps_subtab'),
dcc.Tab(label='Analysis', value='analysis_subtab')
],
)
]),
dcc.Tab(label="Deal", value="deal_tab")
],
value="revenue_tab",
)
],
className="row tabs_div"
),
# Tab content
html.Div(id="tab_content", style={"margin": "-32% 11%","float":"left"}),
# SubTab content
html.Div(id="subtab_content", style={"margin": "-32% 11%","float":"left"})
])
```
When I click 'comps' and 'analysis' subtab, I receive `NameError: name 'comps' is not defined`. `comps.py` and `analysis.py` are within the tab folder.
Callback functions
```
@app.callback(
Output("tab_content", "children"),
[
Input("tabs", "value"),
Input("subtabs", "value")
],
)
def render_content(tab, subtab):
"""
For user selections, return the relevant tab
"""
if tab == "portfolio_tab":
return portfolio.layout
if tab == "reporting_tab":
return reporting.layout
if tab == "market_tab":
return market.layout
if subtab == "comps_subtab":
return comps.layout
if subtab == "analysis_subtab":
return analysis.layout
elif tab == "deal_tab":
return deal.layout
else:
return (no_update)
```
```
Traceback (most recent call last):
File "/Users/Platform/Deploy/index.py", line 131, in render_content
return comps.layout
NameError: name 'comps' is not defined
```
[1]: https://i.stack.imgur.com/RChg4.png