Adjusting height of tabs

Dash Python
1

Hi there,

I’m a very new Dash user, so perhaps this is a stupid question, but I can’t figure out. Any help would be greatly appreciated!

As a simple example, I’ve taken example code from the Dash documentation (shown below) but have tried to adjust the appearance of the tabs via the style property within dcc.Tabs(). The width and font size are modified accordingly, but somehow the height of the tabs remains the same. If I instead change the height value to something absolute, say height=‘10’, then the height of the tabs do change, but the text does not align properly. Does anyone know how to fix this?

Also, for future reference, is there documentation on what values certain properties can take? For example, what are the possible keys that the style property accepts within dcc.Tabs()?

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


app = dash.Dash()

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs-example", value='tab-1-example', style={
        'width': '50%',
        'font-size': '150%',
        'height': '50%'
    },
    children=[
        dcc.Tab(label='Tab One', value='tab-1-example'),
        dcc.Tab(label='Tab Two', value='tab-2-example'),
    ]),
    html.Div(id='tabs-content-example')
])


@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

Have you solved it?:grinning:

3

No, not yet! Haha. I tried a variety of things and then gave up. The text extends past the tab box when adjusting the height of the tabs (whether inside dcc.Tabs() or dcc.Tab()).

5

Sorry for the multiple posts, I found a better way around this (although I suspect there must be an even better way). Set the ‘line-height’ value of dcc.Tabs() to the same value as the ‘height’ value in dcc.Tab() and also set ‘padding’ to 0 in dcc.Tab(). An example is below.

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


app = dash.Dash()

tab_height = '5vh'
app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs-example", value='tab-1-example', style={
        'width': '50%',
        'font-size': '200%',
        'height':tab_height
    },
    children=[
        dcc.Tab(label='Tab One', value='tab-1-example',style={'padding': '0','line-height': tab_height},selected_style={'padding': '0','line-height': tab_height}),
        dcc.Tab(label='Tab Two', value='tab-2-example',style={'padding': '0','line-height': tab_height},selected_style={'padding': '0','line-height': tab_height}),
    ]),
    html.Div(id='tabs-content-example')
])


@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)
4 Likes
6

Thanks, that worked nicely. I used 3vh.