Hello. have problems with the layout of a dash app. I am trying to place the radio items on the same height as the dropdown on the right side, but I can’t do it. I have an image of where is it and where i would like it to be (where the blue arrow is).
Below is my code:
pp.layout = html.Div( [
html.Div( [
html.Label( ['Choose below'], style={'font-weight': 'bold'} ),
dcc.Dropdown(
id='drop1',
options=[{'label': x, 'value': x} for x in df.sort_values( 'CONT' )['CONT'].unique()],
value='Western Europe',
),
dcc.Dropdown(
id='drop2',
options=[{'label': x, 'value': x} for x in df16.sort_values( 'CONT' )['CONT'].unique()],
value='North America',
),
dcc.Dropdown(
id='drop',
options=[{'label': x, 'value': x} for x in df.sort_values( 'CONT' )['CONT'].unique()],
value='Sub-Saharan Africa',
),
] ),
html.Div( [
html.Label( ['Choose x_axis'], style= {'font-weight': 'bold', 'display':'flex', 'justifyContent':'center', 'width' : '120%',
'text-align': 'center'},
),
dcc.RadioItems(
id='radio_items',
options=[
{'label': 'Economic Status', 'value': 'graph1'},
{'label': 'Social Support', 'value': 'graph2'},
],
value='graph1',
style=dict( display='flex', justifyContent='center' , width = '120%', height = '100%'),
),
] ),
] )