Creating checkbox list

Dash Python
1

When I create a checkbox list using dcc.Checkbox(),All the options display side by side.Why is it so?

2

Hi @Sam2 Can you upload an image so we understand what you mean by “all the options appear side by side”.

It might just be a styling parameter that you can change.

4

@adamschroeder I want this to be displayed like a list.Like every entry in a new line.

5

Try playing around with the style of the HTML div. This might work.

html.Div([
    dcc.Checklist(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value=['MTL', 'SF']
    ), style={"width": '10%', 'display': "inline-block"}
])
6

Thank you.It worked but Some of the checkboxes doesnt still move to new line. What could be the reason?

7

@Sam2
Your answer is here: Display checklist/radioitems as a block?

Download the raw css document that @chriddyp posted in his response. Save it in a new folder called “assets”, which should be stored in the same folder where your python/Dash code is located. If you do this, you wont need the style section that I gave you. Delete that line.

That should work.

1 Like