Checklist only in-line

[shane]

I’m trying to change a checklist to display Block style instead of in-line

selections = dcc.Checklist( id='selectionsChkLst', options=[], style={'display':'block'})

This checklist goes inside a Column, which I also tried setting the ‘display’ to ‘block’. Anyone have an idea how to fix this? I looked through the css (https://codepen.io/chriddyp/pen/bWLwgP.css) and see:

input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

Do I need to download the CSS file and manually edit it?

[adamschroeder]

Are you trying to have the checklist items vertically align or horizontally?

[shane]

Vertical. ‘Block’ style refers to vertical alignment, correct?

[adamschroeder]

Sorry, you are correct @shane
Check out this thread. I think your answer is there, at the very bottom:

Creating checkbox list

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"} ])

[shane]

I came across your linked answer but sadly it didn’t solve my issue. I’ve now tried Dash on a different computer (previously on a RPi 3b+) but got the same results: I cannot get the style to be block. Here’s the code I tried:

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

app = dash.Dash('Dash Hello World')

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

app.layout = html.Div([ 
        test
    ], style={'display':'block'})
    
app.server.run(debug=True)

I also tried to put the Checklist in a Bootstrap Column and Row:

app.layout = html.Div([ 
        dbc.Row([
                dbc.Col([test], style={'display':'block'})],
            style={'display':'block'})
    ], style={'display':'block'})

Do you see anything else to try? The other forum people who asked for help on this issue seemed to have it solved easily by styling ‘display’. I can play with different elements and widths to get block style but it’s clunky and unreliable.

[shane]

By limiting the width of the Div that the Checklist is in AND including some sort of border:

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

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

test = 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={"display":"block", 'border':'2px blue solid'}
                )],
                style={'width':'10%','border':'2px green solid'}
                )

app.layout = html.Div([ 
                    dbc.Row([
                            dbc.Col([test])])
                    ])
    
app.server.run(debug=True)

If I get rid of the ‘width’ for the Div or either ‘border’ the block style (appears) to revert back to inline. Here’s the block style I got working:

And here’s with the blue border missing:

[adamschroeder]

Interesting. Does it work with checklist options that vary considerably in length? Such as:
Cairo
New York City, NY, USA
Berlin
Untied Arab Emirates, Middle East
Tel Aviv

[shane]

Interestingly the text is forced to the next line but even single letters take the block style.

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

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

test = html.Div([
    dcc.Checklist(
                options=[
                        {'label': 'New York City', 'value': 'NYC'},
                        {'label': 'Montréal', 'value': 'MTL'},
                        {'label': 'San Francisco', 'value': 'SF'},
                        {'label': 'lqejhwlfjqwefhlqiwenfliqefnqlwefnqlienflqeqwe', 'value': '1'},
                        {'label': 'a', 'value': '2'},
                        {'label': 'ajsd;fawefuhwoweuhfoasdfasdfa', 'value': '3'},
                        ],
                value=['MTL', 'SF'],
                style={"display":"block",'border':'2px blue solid'}
                )],
                style={'width':'10%','border':'2px green solid'}
                )

app.layout = html.Div([ 
                    dbc.Row([
                            dbc.Col([test])])
                    ])
    
app.server.run(debug=True)

But if I remove the borders I get:

After playing around with using borders and changing the ‘display’ I’ve seen that it doesn’t matter: only managing the width will force checklist items to be block, and then you can only use this strategy if all options are approximately the same character length. If any are too short they will be inline, and if any are too long they will be block style with their own check box.

It smells fishy to me why such a basic feature wouldn’t be working at all.

[adamschroeder]

@shane
Styling is very complicated and time consuming, which is why I usually take CSS files from other much-more-experienced programmers if their CSS files work correctly. My/your code is working correctly with this css (https://codepen.io/chriddyp/pen/bWLwgP.css).

This is YOUR-CODE:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

#---------------------------------------------------------------
app.layout = html.Div([
    html.Div([
        dcc.Checklist(
            options=[
                {'label': 'New York City', 'value': 'NYC'},
                {'label': 'Montréal', 'value': 'MTL'},
                {'label': 'San Francisco', 'value': 'SF'},
                {'label': 'lqejhwlfjqwefhlqiwenfliqefnqlwefnqlienflqeqwe', 'value': '1'},
                {'label': 'a', 'value': '2'},
                {'label': 'ajsd;fawefuhwoweuhfoasdfasdfa', 'value': '3'}
            ],
            value=['MTL', 'SF']
        )
    ]),

])


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

Here’s what you want to do:

1. Copy-paste the content from the link and create a css file called bWLwgP.css
2. Save that css file in a new folder called assets.
3. Save the assets folder in the same directory where YOUR-CODE.py is saved.

Once you run YOUR-CODE.py file, it should work. Let me know if it doesn’t.

[shane]

Ah, I see. It was the dbc.themes.BOOTSTRAP css file that doesn’t handle the ‘display’ style. Changing to bWLwgP.css fixes the problem. Until the ‘display’ issue Bootstrap css styling worked fine, but I’ll go back to bWLwgP.

I appreciate the help.