Display checklist/radioitems as a block?

Dash Python
1

Hi!
I have been trying to build a simple app based on the few examples provided on the Dash website.
I am running into an issue with displaying checklist/radioitems as a block (one under another).
So reading the docs there : Dash Core Components | Dash for Python Documentation | Plotly the dcc.Checklist without any css options should display things in columns by default, yet I can’t seem to do that.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([dcc.RadioItems(
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value='MTL'
)])

if __name__ == '__main__':
    app.run_server(debug=True)

Thank you!

2

Hey @jschroder –

Good question. The examples on the docs actually plugin an external CSS stylesheet. You can use the same stylesheet as the docs with

app.scripts.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})

The stylesheet itself is here: https://codepen.io/chriddyp/pen/bWLwgP (interactive form) and here: https://codepen.io/chriddyp/pen/bWLwgP.css (raw form), which you can fork and modify as you like.

A little bit more about styling is here: https://plot.ly/dash/external-resources

3

Oh I get it!
Thanks for the answer!