In the layout of my Dash app, I have flexible container containing a dcc.RadioItems component. I want all of the labels and their corresponding radio buttons to be next to each other, however I want each button-label pair to be vertically stacked. This works fine until I want to change the label to not just be text, but another Dash component (an html.Div exactly, so I can format its margins properties).
Here's the part of the layout responsible for the dcc.RadioItems and its parent container:
dbc.Container([ dcc.RadioItems([ {'label': html.Div(['Label 1'], style={'margin-bottom': '20px'}), 'value': 'l1'}, {'label': html.Div(['Label 2'], style={'margin-bottom': '20px'}), 'value': 'l2'}, {'label': html.Div(['Label 3'], style={'margin-bottom': '20px'}), 'value': 'l3'}],, inline=False, labelStyle={'display': 'block'}) ],, style={"display": "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center"}), This version makes the button-label pair appear under each other like this
o label1 o label2 o label3 whereas I want it to be positioned like
o label1 o label2 o label3 I also want the RadioItems position to be centered in the parent container, both horizontally and vertically, thus the parent container style has justify-content and align-items attributes, but I assume that has little to do with my problem (might be wrong, as I am not a web-dev developer). I have tested all possible combinations of flex-direction, labelStyle and inline but were not able to get the positioning I desire. I have a feeling this problem has to do something with the underlying css classes and I am just not experienced in front-end enough to solve it.
1 Answer
I think the cause of this is the html.Div() inside label. Try adding 'display':'inline-block' to style for all label divs and the problem should be solved.
{'label': html.Div(['Label 1'], style={'margin-bottom': '20px','display':'inline-block'}), 'value': 'l1'} 
