Hello,
I am making a multi-tab dash app and am struggling to make the tab names fit into the tab box (please see below). Is there a styling option to achieve this automatically? I’m struggling to find the correct option - my code is below. Thank you for reading!
CODE:
app.layout = html.Div([dcc.Tabs(id = 'user_tabs',
value = 'dynamic_score',
children = [dcc.Tab(label = metric[0].upper() + ''.join(i.lower() for i in metric[1:]),
value = metric,
children=[html.H4('Live adjustable graph-size'),
html.P("Change figure width:"),
dcc.Slider(id=f'{metric}_slider_width',
min=100,
max=2000,
step=100,
value=2000,
marks={x: str(x) for x in range(100, 2000, 100)}),
dcc.Slider(id=f'{metric}_slider_height',
min=100,
max=2000,
step=100,
value=1000,
marks={x: str(x) for x in range(100, 2000, 100)}),
dcc.Graph(id=f'{metric}_graph'),
html.Div([html.H4('max val',
style= {'display':'inline-block',
'margin-right':20,
'margin-top':0}),
dcc.Input(id=f'{metric}_max_val',
type='number',
value = 1000000,
style={'display':'inline-block'})],
style={'display':'inline-block',
'width': '100%'})
]) for metric, val in vals] +
[dcc.Tab(label='dynamic_score',
value = 'dynamic_score',
children = [html.H4('Live adjustable graph-size'),
html.P("Change figure width:"),
dcc.Slider(id='slider_width', min=100, max=2000, step=100, value=2000,
marks={x: str(x) for x in range(100, 2000, 100)}),
dcc.Slider(id='slider_height', min=100, max=2000, step=100, value=1000,
marks={x: str(x) for x in range(100, 2000, 100)}),
dcc.Graph(id='dynamic_score_graph'),
*[html.Div([html.H4(f'{metric} weight',
style= {'display':'inline-block',
'margin-right':20,
'margin-top':0}),
dcc.Input(id=f'{metric}_weight',
type='number',
value = val,
style={'display':'inline-block'})],
style={'display':'inline-block', 'width': '100%'})
for metric, val in vals],
html.Div([html.H4('max val',
style= {'display':'inline-block',
'margin-right':20,
'margin-top':0}),
dcc.Input(id='max_val',
type='number',
value = 1000000,
style={'display':'inline-block'})],
style={'display':'inline-block',
'width': '100%'})
]
)
])])
IMAGE:
