Hello,
I’m using the default style presented here, on Tabs, dcc.Tabs | Dash for Python Documentation | Plotly.
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:
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.
