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

Vertical tabs - content displaying below tabs, not next to tabs

Hi all,

I’m using the dcc.Tabs and dcc.Tab components, setting vertical to True:

dcc.Tabs(id='tabs',
                    value='tab-1',
                    vertical=True,
                    children=[
                         dcc.Tab(label='Main Themes', value='tab-1'),
                         dcc.Tab(label='Emerging Themes', value='tab-2'),
                         dcc.Tab(label='Statistics', value='tab-3'),
                    ],
            ),

@app.callback(Output('tabs-content', 'children'),
              [Input('tabs', 'value')])
def render_content3(tab):
        if tab == 'tab-1':
            return html.Div([
                html.P('main theme content here')
            ])

The tabs themselves are displaying vertically, but the content then unexpectedly sits underneath, rather than to the right of the tabs:

How do I change this?

Where have you defined the component with id = ‘tabs-content’? This is probably some empty Div in the layout? If so you can use CSS styling to position the contents next to the tabs ({‘float’: ‘left’} may work).

Thanks for the suggestion!

        html.Div(id='tabs-content',
                 style = {
                    'float': 'left'
                 }),

I played around with the ‘float’ and whilst it did shift the content horizontally, it didn’t move it next to the tabs, it stayed below the tabs themselves.

You also have to apply {‘float’: ‘left’} to the parent of the tabs. See the below example modified from https://dash.plot.ly/dash-core-components/tabs

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


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

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

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    html.Div([
        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'),
        ],  vertical=True, parent_style={'float': 'left'}),
        html.Div(id='tabs-content-example', style={'float': 'left', 'width': '400'})
    ])
])


@app.callback(Output('tabs-content-example', 'children'),
              [Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1-example':
        return html.Div([
            html.H3('Tab content 1'),
            dcc.Graph(
                id='graph-1-tabs',
                figure={
                    'data': [{
                        'x': [1, 2, 3],
                        'y': [3, 1, 2],
                        'type': 'bar'
                    }]
                }
            )
        ])
    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'
                    }]
                }
            )
        ])


if __name__ == '__main__':
    app.run_server(debug=True)
2 Likes

Fantastic, that’s solved it!

2 Likes