How to divide a checklist into several columns?

Dash Python
1

I’m a beginner in Dash and I have never coded in html/CSS so I’m not sure how all this works.

I’ve been trying to separate a checklist into several columns.

Here is a part of my code:

html.Div(
                dcc.Checklist(className ='checkbox_1',
                        options=[
                            {'label': 'A1', 'value': 'I1ST1'},
                            {'label': 'A2', 'value': 'I2ST1'},
                            {'label': 'A3', 'value': 'I3ST1'},
                            {'label': 'A4', 'value': 'I4ST1'},
                            {'label': 'A5', 'value': 'I5ST1'},
                            {'label': 'A6', 'value': 'I6ST1'}
                                ],
                        values='I1ST1',
                        labelStyle = {'display': 'block'}
                                ),
            ),

            html.Div(
                dcc.Checklist(className ='checkbox_1',
                        options=[
                            {'label': 'B1', 'value': 'I1ST2'},
                            {'label': 'B2', 'value': 'I2ST2'},
                            {'label': 'B3', 'value': 'I3ST2'},
                            {'label': 'B4', 'value': 'I4ST2'},
                            {'label': 'B5', 'value': 'I5ST2'},
                            {'label': 'B6', 'value': 'I6ST2'}
                                ],
                        values='I1ST2',
                        labelStyle = {'display': 'block'}
                                )
            ),
            html.Div(
                dcc.Checklist(className ='checkbox_1',
                        options=[
                            {'label': 'C1', 'value': 'I1MT'},
                            {'label': 'C2', 'value': 'I2MT'},
                            {'label': 'C3', 'value': 'I3MT'}
                                ],
                        values='I1MT',
                        labelStyle = {'display': 'block'}
                                )
                    )       
                ]
            )

I currently got something like this:

☒ A1
☐ A2
☐ A3
☐ A4
☐ A5
☐ A6
☒ B1
☐ B2
☐ B3
☐ B4
☐ B5
☐ B6
☒ C1
☐ C2
☐ C3

What I want looks like this:

☒ A1   ☒ B1   ☒ C1
☐ A2   ☐ B2   ☐ C2
☐ A3   ☐ B3   ☐ C3
☐ A4   ☐ B4
☐ A5   ☐ B5
☐ A6   ☐ B6

I tried to add some CSS functions in the labelStyle functions (float, width) but none of them work.

Am I doing this the right way? What should I do?

2

Checkout this solution on stackoverflow:

Hope this helps!

3

Thank you :slight_smile:

Somebody also answers me on stackoverflow : https://stackoverflow.com/questions/56847745/how-to-divide-a-python-dash-checklist-into-several-columns