Resize with tabs when changing to tabs vertical


#1

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

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.

(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


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