Resize with tabs when changing to tabs vertical

Dash Python
1

When I change tabs vertical = False to True whatever I have in the tabs get massively squashed.

image
image.png1899×802 23.4 KB

image
image.png1902×735 30.3 KB

With a lot of white space on the right of the screen.

The code is as follows (it is an example I found online):

import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div([
    html.H1('Dash Tabs component demo', style={
            'textAlign': 'center', 'margin': '48px 0', 'fontFamily': 'system-ui'}),
    dcc.Tabs(id="tabs",
            vertical = False,
            children=[
        dcc.Tab(
            label='Tab one',
            children=[
            html.Div([
                dcc.Graph(
                    id='example-graph',
                    figure={
                        'data': [
                            {'x': [1, 2, 3], 'y': [4, 1, 2],
                                'type': 'bar', 'name': 'SF'},
                            {'x': [1, 2, 3], 'y': [2, 4, 5],
                             'type': 'bar', 'name': u'Montréal'},
                        ],
                        'layout': {
                            'title': 'Dash Data Visualization'
                        }
                    }
                )
            ])
        ]),
        dcc.Tab(label='Tab two', children=[
            html.Div([
                html.H1("This is the content in tab 2"),
                html.P("A graph here would be nice!")
            ])
        ]),
        dcc.Tab(label='Tab three', children=[
            html.Div([
                html.H1("This is the content in tab 3"),
            ])
        ]),
    ]
    )
])


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

Shouldn’t it automatically fill the available space?
Otherwise do I need to set the Style to take account of this?

2

Yup, set the style. width: calc(100% - 100px) or something like that

3

Thank you for the response.

I have tried adding

style= {
    "width": "calc(100% - 100px)"
},

to dcc.Tab but this seems to only make the graph a little smaller.

image
image.png1920×742 26.1 KB

(I should also mention that I have only just started using Dash but have also only recently learned how to use Python so apologies if it is just me being thick)

4

So I am actually having this issue with a different piece of code but I though if I could fix it in one I could in the other as well.

I tried adding

style= {
    "width": "calc(200% - 100px)"
},

Which worked for the other one to

dte.DataTable(rows=[{}], id='table',)

and it returns

TypeError: Unexpected keyword argument `style`

Additionally I assume I would have to add the style bit too all code that I’m running. Is there some way I can have it automatically be applied to everything

1 Like
5

I have kinda gotten round this by turning each tab into its own subplot and then adjusting the size of the subplot. However this only seems to increase objects by a scale rather than automatically getting the right size (like when the tabs are Horizontal).

I was hoping that someone could confirm this as a bug (The fact that it only auto picks the best size when tabs are horizontal but not then they are vertical) since then I know it will be fixed at some point.

Many Thanks

6

Problem seems to be that by default the flex-direction of the tabs is set to ‘row’ which overwrites other style settings. A workaround can be to set e.g. min-width = 200%. A better solution should be to change the flex-direction to column, to not have it interfere. How about the following solution where you split into two separate Divs:

import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = \
    html.Div([
        html.H1('Dash Tabs component demo',
                style={'textAlign': 'center',
                       'margin': '48px 0',
                       'fontFamily': 'system-ui'}),
        html.Div([
            dcc.Tabs(id="tabs",
                     vertical=True,
                     parent_style={'flex-direction': 'column',
                                   '-webkit-flex-direction': 'column',
                                   '-ms-flex-direction': 'column',
                                   'display': 'flex'},
                     children=[dcc.Tab(label='Tab one', value=1),
                               dcc.Tab(label='Tab two', value=2),
                               dcc.Tab(label='Tab three', value=3)])],
            style={'width': '25%',
                   'float': 'left'}),
        html.Div(id='tab-out',
                 style={'width': '75%', 'float': 'right'})])


@app.callback(Output('tab-out', 'children'),
            [Input('tabs', 'value')])
def tab_content(tabs_value):
    """return s.th. based on tabs_value"""
    if tabs_value == 1:
        children = html.Div([
                dcc.Graph(
                    id='example-graph',
                    figure={
                        'data': [
                            {'x': [1, 2, 3], 'y': [4, 1, 2],
                                'type': 'bar', 'name': 'SF'},
                            {'x': [1, 2, 3], 'y': [2, 4, 5],
                             'type': 'bar', 'name': u'Montréal'},
                        ],
                        'layout': {
                            'title': 'Dash Data Visualization'
                        }
                    }
                )
            ])
    elif tabs_value == 2:
        children = [
            html.Div([
                html.H1("This is the content in tab 2"),
                html.P("A graph here would be nice!")
            ])
        ]
    else:
        children = [
            html.Div([
                html.H1("This is the content in tab 3"),
            ])
        ]

    return children


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

I am continuing to experience this issue. I’m thankful for an explanation of how to work around the limitation, but I’m increasingly trying to get away from html Divs for layout out my apps. Otherwise I wouldn’t be using Dash.

What’s the best way to highlight such issues as enhancement suggestions?