inLine Not working for Checklist

Dash Python
1

Hi there,

Let me know what is the problem of my Dash app code:

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

app.layout=html.Div([

                    html.H1('Header'),

                    html.P('Click to Add files:'),
                    dcc.Upload(html.Button('Upload File'),id='upload',multiple =True),

                    dcc.Checklist(id='FilesChL',style={'paddingTop':20},inline =False, 
                                  options=[{'label':'Nothing Entered','value':'Nothing'}])
                     

],style={'padding':20})

I have set the inline property equal to false and I expect that the results be shown line by line but the results are in this way:

image
image753Ă—246 10.2 KB

Please guide me what is the problem?

2

HI @Bijan, that’s strange. Even the first example from the documents is not behaving as expected using dash 2.6.2. Which Dash version are you using?

Reading the documentation concerning the horizontal option:

inline=True, we configured the checklist options to be displayed horizontally. This property is a shorthand for setting it on the labelStyle property and is available from Dash 2.1. The same can be done with labelStyle={'display': 'inline-block'} in earlier versions of Dash.

So a workaround could be specifying the labelStyle:

import dash
from dash import html, dcc

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Checklist(
        ['New York City', 'Montréal', 'San Francisco'],
        ['New York City', 'Montréal'],
        labelStyle={'display': 'block'}
    )
])

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

creates:
image2

2 Likes
3

How about you remove the inline property at all.

1 Like
4

Hey @Gaylord you mean like in the example? (See link in my last post)

1 Like
6

Sorry Dear @AIMPED , I didn’t pay attention to this part of your comment and you had mentioned the reason. Thanks

1 Like
7

Yaaah that is correct :muscle: :muscle: :muscle:

1 Like