✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

dcc.Tab: Tabs on several lines - Looking for a better solution to display the first tab on 1 row, and the other ones on several rows

Hello,

I’m using the default style presented here, on Tabs, https://dash.plot.ly/dash-core-components/tabs.

The goal I’m trying to reach is :
first tab on one row,
next tabs on one or several rows.

I believe I’m currently limited by the default Javascript applied on tabs, when the screen’s width is larger than 800px

Here is my code:

            dcc.Tabs(
            id="tabs-example", 
            value='AUS', 
            parent_className='custom-tabs',
            className='custom-tabs-container',
            children=[
                dcc.Tab(label='General', value='GENERAL', className='custom-tab-first', selected_className='custom-tab-first--selected', style={'width':'99%'}),
                dcc.Tab(label='AUS', value='AUS', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='BEL', value='BEL', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='DAN', value='DAN', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='FIN', value='FIN', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='FRA', value='FRA', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='GER', value='GER', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='ITA', value='ITA', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='LUX', value='LUX', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='NET', value='NET', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='NOR', value='NOR', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='POR', value='POR', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='SPA', value='SPA', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='SWE', value='SWE', className='custom-tab', selected_className='custom-tab--selected'),
                dcc.Tab(label='SWI', value='SWI', className='custom-tab', selected_className='custom-tab--selected'),
            
        ], style={'flex-direction':'row'}),

(I just put width=99% to check more easily which property is herited when I inspect the page)

And that’s my css:

.custom-tabs-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction:row;
    flex-flow: row wrap;
}
.custom-tabs {
    border-top-left-radius: 3px;
    background-color: #f9f9f9;
    padding: 0px 0px;
    border-bottom: 1px solid #d6d6d6;
}

.custom-tab-first {
    color:#586069;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 3px solid transparent !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 0px !important;
    background-color: #fafbfc;
    padding: 4px !important;
    font-family: "system-ui";
    display: inline-block !important;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.custom-tab-first--selected {
    color: black;
    box-shadow: 1px 1px 0px white;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-top: 3px solid #e36209 !important;
    display:inline-block !important;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.custom-tab {
    color:#586069;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 3px solid transparent !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 0px !important;
    background-color: #fafbfc;
    padding: 4px !important;
    font-family: "system-ui";
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0%;
}
.custom-tab--selected {
    color: black;
    box-shadow: 1px 1px 0px white;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-top: 3px solid #e36209 !important;
    width:100%;
}

The result on mobile is this:
dccTabchromeMobileView-capture

But on desktop with a screen larger than 800px, i get this:

The solution I use now is that I fix the width of my first tab at 100%. This way, the 14 next tabs are on the next row.

Problem: when “General” is selected, the Javascript applies a style to the selected tab, and I can’t force my CSS (or I didnt find the way) to keep a width of 100%. Instead of this, when a tab is selected, it seems that the size is determined as below:

If I manually replace “calc(100% / 15)” by “100%”, the problem is fixed. But I dont find a way to do it with Dash directly.

Does anyone has a better solution for this?

Edit: I think it should be possible to set the “mobile_breakpoint” value so that it takes the value of the screen’s size on which the page it displayed. In short, this would force the Tabs to be rendered on Desktop the same way they would be rendered on mobile.

…just figured out that the mobile_breakpoint value can be set in the Tabs’ properties…:man_facepalming:

Moreover, it is possible to override the style applied on each selected tab, with the property selected_style inside dcc.Tab.

:ok_hand:

1 Like

@David22 I have 5 dcc tabs in one row but when I view it on mobile device in inspect, all tabs adjust themself into 5 rows. But I want them to be in same row on mobile device also. Do you know how to do that?