CODEWITHSUNDEEP
pythonhtmlcssplotly-dash
Zephyr
Zephyr

Reputation: 12496

Plotly Dash: dcc.RadioItems vertical alignment

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

Upvotes: 9

Views: 24417

Answers (1)

user11989081
user11989081

Reputation: 8663

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.

Upvotes: 10

Related Questions