Declare Sub tabs in tabs the right way

Dash Python
1

I have the following problem. I want to make a dash app, in which I have a nav bar with sseveral tabs. In each of this tabs, different vertical subtabs can show up. I tried a simple example. But the problem is that the content of the sub tabs appear too small. If there is another way to have a tab navbar i would also interested in. The subtabs should also be fixed but i dobnt know how to do a sub vertical nav bar. This is my code:

from dash import Dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

_tab1Content = html.Div([
        html.Div([
        html.H3('Tab content 1'),
        dcc.Tabs(id="sub_tabs_1", value='tab1_sub1', children=[
        dcc.Tab(label='Tab One', value='tab1_sub1',className='one column'),
        dcc.Tab(label='Tab Two', value='tab1_sub2',className='one column'),
        dcc.Tab(label='Tab Three', value='tab1_sub3',className='one column')],vertical = True),
    ],className='one column'),
],className='ten columns')

_body = html.Div([html.H2("Heading"),dbc.Button("View details", color="secondary"),\
    html.Div([

        html.Div(id='tabs-content-example',style={'borderStyle': 'dashed'},className="six columns"),
        html.Div(id='sub_tabs1_content',children=[_tab1Content],style={'borderStyle': 'dashed'},className="six columns")]
        ,className='row')
              ])

_navbar = dbc.Navbar(
#brand="Demo",
#brand_href="#",
sticky="top",
color="black",
dark="True",
children=[
    dbc.DropdownMenu(
        nav=True,
        in_navbar=True,
        label="Menu",
        children=[
            dbc.DropdownMenuItem("Entry 1"),
            dbc.DropdownMenuItem("Entry 2"),
            dbc.DropdownMenuItem(divider=True),
            dbc.DropdownMenuItem("Entry 3"),
        ],
    ),
    dbc.NavItem(dbc.NavLink("Link", href="#")),
    dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
        dcc.Tab(label='Tab One', value='tab-1-example'),
        dcc.Tab(label='Tab Two', value='tab-2-example'),
        dcc.Tab(label='Tab Three', value='tab-3-example'),
],style={'color':'dark'}),
],
)

external_stylesheets = [dbc.themes.SIMPLEX]

app = Dash(
__name__,
external_stylesheets=external_stylesheets
)

#app.config['suppress_callback_exceptions']=True
app.layout = html.Div([_navbar, _body])

@app.callback(Output('sub_tabs1_content', 'children'),
          [Input('sub_tabs_1', 'value')])

def render_content_sub1(tab):
if tab == 'tab1_sub1':
    return html.Div([])
elif tab == 'tab1_sub2':
    return html.Div([
        html.H3('Tab content 2'),
        dcc.Graph(
            id='graph-2-tabs',
            figure={
                'data': [{
                    'x': [1, 2, 3],
                    'y': [5, 10, 6],
                    'type': 'bar'
                }]
            },className='six columns'
        )
    ],className='six columns')

@app.callback(Output('tabs-content-example', 'children'),
          [Input('tabs-example', 'value')])

def render_content(tab):
if tab == 'tab-1-example':
    return _tab1Content
elif tab == 'tab-2-example':
    return html.Div([
        html.H3('Tab content 2'),
        dcc.Graph(
            id='graph-2-tabs',
            figure={
                'data': [{
                    'x': [1, 2, 3],
                    'y': [5, 10, 6],
                    'type': 'bar'
                }]
            }
        )
    ],className='six columns')

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

example
example.PNG1911×876 26.5 KB