Black Lives Matter. Please consider donating to Black Girls Code today.

Tab Label Disappears After Adding RadioItems within Tab

Hello, I’m new to dash and am in awe at what I can do with it, but I’ve encountered an issue I can’t figure out. I have a row of tabs above a plot area and things worked fine.

Then, I added a “RadioItems” component on tab1 as another way to change the plot area.

It worked, but the tab label (“Earnings” no longer shows up.

Below is the main code, and a screenshot of the issue.

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
dcc.Tabs(id=‘tabs-example’, value=‘tab-1’, children=[
html.Div([dcc.Tab(label=‘Earnings’, value=‘tab-1’),
dcc.RadioItems(id=‘time-int’,
options=[
{‘label’: ‘Quarterly’, ‘value’: ‘Q’},
{‘label’: ‘Annual’, ‘value’: ‘A’},
{‘label’: ‘TTM’, ‘value’: ‘T’}
],
value=‘T’
)]),
dcc.Tab(label=‘Debt’, value=‘tab-2’),
dcc.Tab(label=‘Growth’, value=‘tab-3’),
dcc.Tab(label=‘Valuation’, value=‘tab-4’),
dcc.Tab(label=‘Peers’, value=‘tab-5’),
dcc.Tab(label=‘Technicals’, value=‘tab-6’),
]),

            html.Div(id='tabs-example-content')],
            style={
                    'width': '47%'

            })

@app.callback(Output(‘tabs-example-content’, ‘children’),
[Input(‘tabs-example’, ‘value’),
Input(‘time-int’, ‘value’)]) # To set initial value, it looks like you need to have an outer layer tab thingy
def render_content(tab, sometime):
if tab == ‘tab-1’:
if sometime == ‘Q’:
return html.Div([

                        dcc.Graph(figure=fig_tab1_q, config = {'displaylogo': False, 'displayModeBar': False})

                            ])
        elif sometime == 'A':
            return html.Div([
                
        dcc.Graph(figure=fig_tab1_a, config = {'displaylogo': False, 'displayModeBar': False})

            ])
        
        elif sometime == 'T':
            return html.Div([
                
        dcc.Graph(figure=fig_tab1_ltm, config = {'displaylogo': False, 'displayModeBar': False})

            ])

elif tab == 'tab-2':
    return html.Div([
        html.H3('Tab content 2')
    ])

elif tab == 'tab-3':
    return html.Div([
        html.H3('Tab content 3')
    ])

elif tab == 'tab-4':
    return html.Div([
        html.H3('Tab content 4')
    ])

elif tab == 'tab-5':
    return html.Div([
        html.H3('Tab content 5')
    ])

elif tab == 'tab-6':
    return html.Div([
        html.H3('Tab content 6')
    ])

Hi @Mr256 welcome to the forum! The children of a dcc.Tabs component should be an array made only of dcc.Tab, I don’t think you’re supposed to add other components like dcc.RadioItems. You can have the dcc.RadioItems appear in a div or as Tab children as described in the Tabs/Tab documentation.

Thanks for the response! Interesting, I’m still a bit lost after rereading the tabs docs.

Would you be able to explain a bit how to write the code to do something simple? Like creating a website with two tabs, and the first tab has a radioitem with a dcc graph below it. Thanks so much for getting back to me.