I am trying to format the components of a dash app using dash bootstrap components. I would like to have the graph in the image next to a slider component, as indicated in the bottom image. It's not working as expected – please could someone indicate what (probably basic) mistake I am making?
Many thanks!
CODE:
app.layout = html.Div([dcc.Tabs(id = 'user_tabs',
value = 'dynamic_score',
vertical = True,
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:"),
#https://stackoverflow.com/a/60491495/11357695
dbc.Container(children = [dbc.Row(dbc.Col(html.Div([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)})],
style = {'width': '50%'}))),
dbc.Row([dbc.Col(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)},
vertical = True),
align = 'start'),
dbc.Col(dcc.Graph(id=f'{metric}_graph'),
align = 'center')
])
]),
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 my_vals] +
#included for complete code, but am waiting to get a working bootstrap implementation before including in the layoutr below
[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 mib_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:
(blue and black boxes were added manually)
