Summary
import dash
from dash import dcc, html
app = dash.Dash(name)
tabs_style = {
‘width’ : ‘100%’,
‘display’ : ‘flex’,
‘flexWrap’ : ‘wrap’,
‘justifyContent’ : ‘flex-start’
}
tab_style = {
‘borderTop’ : ‘1px solid #cccccc’,
‘borderBottom’ : ‘1px solid #cccccc’,
‘backgroundColor’ : ‘#FFFFFF’,
‘padding’ : ‘8px’,
‘textAalign’ : ‘center’,
‘flex’ : ‘1 1 11%’,
‘flexBasis’: ‘11%’,
‘flexGrow’: 0
}
tab_style_sel = {
‘borderTop’ : ‘1px solid #cccccc’,
‘borderBottom’ : ‘1px solid #cccccc’,
‘backgroundColor’ : ‘#F0F2F4’,
‘padding’ : ‘8px’,
}
app.layout = html.Div([
dcc.Tabs(id=“tabs-example”, value=‘tab-1’, children=[
dcc.Tab(label=‘Tab One’, value=‘tab-1’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab Two’, value=‘tab-2’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab Three’, value=‘tab-3’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab Four’, value=‘tab-4’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab Five’, value=‘tab-5’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab Six’, value=‘tab-6’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab 7’, value=‘tab-7’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab 8’, value=‘tab-8’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab 9’, value=‘tab-9’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab 10’, value=‘tab-10’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab 11’, value=‘tab-11’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab 12’, value=‘tab-12’, style=tab_style, selected_style=tab_style_sel),
dcc.Tab(label=‘Tab 13’, value=‘tab-13’, style=tab_style, selected_style=tab_style_sel),
],style=tabs_style
),
html.Div(id=‘tabs-content-example’)
])
@app.callback(
dash.dependencies.Output(‘tabs-content-example’, ‘children’),
[dash.dependencies.Input(‘tabs-example’, ‘value’)]
)
def render_content(tab):
return html.Div([
html.H3(f’Content of {tab}')
])
if name == ‘main’:
app.run_server(debug=True)
I get this result, with always having “Content of div”, below the tabs and the second row not filling up all the space of row 2.