9

I would like to align vertically all options of a dash_core_components.RadioItems.
According to the dash documentation, the default behavior should include a vertical alignment of the RadioItems options. If you wanted to align the options horizontally, you would have to specify:

labelStyle={'display': 'inline-block'}

On the contrary, as default behavior I get a horizontal alignment and I don't know what to specify as the display item to get a vertical alignment of the RadioItems options.
Here my attempt until now:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash()

app.layout = html.Div([dcc.RadioItems(id = 'input-radio-button',
                                      options = [dict(label = 'A', value = 'A'),
                                                 dict(label = 'B', value = 'B')],
                                      value = 'A'),
                       html.P(id = 'output-text')])


@app.callback(Output('output-text', 'children'),
              [Input('input-radio-button', 'value')])
def update_graph(value):
    return f'The selected value is {value}'


if __name__ == "__main__":
    app.run_server()

What I get:

enter image description here

I would like to get a results like this (image manually edited):
enter image description here

I found this reference where this problem is mentioned. There, it is proposed to solve it by referring to an external stylesheet. I would like, if possible, to avoid this turnaround and solve it by specifying the correct option within the definition of the RadioItems element.

Version info:

Python  3.7.0
dash    1.12.0
plotly  4.7.0

1 Answer 1

10

You can pass the labelStyle={'display': 'block'} property to dcc.RadioItems() in order to vertically align the different options, but I suggest that you follow the recommendation in the Dash Community Forum, which is to always link the Dash CSS file bWLwgP.css.

3
  • Thank you so much! The problem is that I already use this stylesheet: app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP]). Could I manage two different stylesheets?
    – Zephyr
    Jun 6, 2020 at 20:14
  • 1
    Yes you can include multiple sylesheets, even though some properties may overwrite each other. For your case it seems to be OK, if I run your code above with app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP, 'https://codepen.io/chriddyp/pen/bWLwgP.css']) the radio items options become automatically vertically aligned (i.e. without adding labelStyle={'display': 'block'}). Jun 6, 2020 at 20:20
  • In recent version, local stylesheets can be placed in assets/ directory and automatically loaded. Oct 21, 2022 at 13:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.