Tabs Component Responsive Layout

Dash Python
1

I am struggling to adjust the layout of the tabs component for my dashboard as the data range is 11 years and the tabs overlaps when the screen size reduces. It looks like this;
image

How to adjust to split half of the tabs to the 2nd row instead of just the last?
This is the code for generate the tabs component:

    html.Div([
        html.H2('Team Stats by Season', className='text-center pb-3'),
        dcc.Tabs(id='bar-chart-year-tabs', value=f'year-{max_year}', className='nav nav-pills', children=[
            dcc.Tab(label=str(year), value=f'year-{year}', className='nav-item') for year in range(min_year, max_year + 1)
        ]),
        html.Div([
            dcc.Graph(id='team-bar-chart'),
            dcc.Dropdown(
                id='team-stat-dropdown',
                options=[{'label': format_stat_name(stat), 'value': stat} for stat in team_stats],
                value='total_yards',
                className='btn w-50 mb-3')
        ], className='p-3')
    ], className='col-12 col-xl-6 px-3')
2

Hello @Alfredo49,

For my purposes, I actually have a drop-down hidden up to certain break points and hide the regular tabs at that break point. On mobile the tabs just push all the content down which becomes frustrating.

I don’t know if there is a way to make it do that it has to split in half if 1 breaks. You’d have to do it in JS and manipulate the tab widths themselves I would think.

3

Thanks @jinnyzor, do you have any code sample applying it?

4

You can use AntdTabs in feffery-antd-components, auto responsive, pretty easy:
demo

import dash
from dash import html
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdTabs(
            items=[
                {
                    "label": f"Tab{i}",
                    "key": f"Tab{i}",
                    "children": fac.AntdCenter(
                        f"This is Tab{i}", style={"height": 400}
                    ),
                }
                for i in range(1, 10)
            ]
        )
    ],
    style={"padding": 50},
)

if __name__ == "__main__":
    app.run(debug=True)

related document:

https://fac.feffery.tech/AntdTabs

1 Like