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

Dash Python
1

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:

11
Screenshot 2019-01-03 at 16.32.11.png1530×606 9.1 KB

How do I change this?

2

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).

3

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.

4

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)
3 Likes
5

Fantastic, that’s solved it!

2 Likes