How to deal with many tabs?

Dash Python
1

I have now 9 tabs and a view more are to come. However, when the tabs are displayed in a single row which is pushed out of the view, so the user has to scroll to the right to access the last tabs. Is there a way to break the tabs into multiple rows and not allow the row to be broader than the current viewport?

Or when no min-width is provided for the individual tabs the tabs are very squeezed.

2

Hi @mail8

If you try using vertical=True

3

That is quite good. Together with style={'display': 'inline-block'} this almost does what I am looking for.

Although, it messes up the layout. Some of the borders are missing in the tabs:

Screenshot 2021-01-26 202241
Screenshot 2021-01-26 2022411834×324 3.59 KB

And I would need to find a way to constrain the tab width. Otherwise, the tabs look quite messy. style=... does not seem to work.

4

@mail8

I was sugesting this way:

image
image189×512 3.14 KB

5

Here as well you see that the borders are missing on the right side. Or is it just in my browser?

6

Yes they are mising, the first one is intentionally, it’s the same in the horizontal view, just for indicating that this is the active Tab.
But you can modify it with border styles.

7

I was talking about the right side. All the tabs have no border there. Thank you though.

8

I also was talking about that, you can modify with border style.

9

Oh, I thought you mean the blue thing on the left of the first tab. Language is so ambiguous.

10

It is difficult to get the layout great with the vertical option. I now use boostrap components for rows and columns which made the elements align side by side, but then on smaller viewports the tabs are overlapping with the main content which does not look great.

Screenshot 2021-02-09 051847
Screenshot 2021-02-09 051847956×920 8.44 KB

11 
_layout = dbc.Container([

    dbc.Row([ 

        dbc.Col([

            dcc.Tabs(id='secondary-tab', value='heatmap', vertical=True,

                children=[

                    dcc.Tab(value=key, 

                            label=components[key]['label'],

                            )

                    for key in components.keys()]

            ),

        ], width=2),

        dbc.Col([

            html.Div(id='secondary-tab-content')

        ])

    ])

], fluid=True)
12

That’s the problem with vertical tabs, as they must be visible uses part of the screen.
Other option is search for other solutions in bootstrap like navbar or dropdownmenu where you can build a dropdown menu.

1 Like
13

just throwing out an idea here. Would it be possible to convert them into a drop-down list instead of individual tabs?