How to display the Checklist Vertically

Dash Python
1

Hey guys I am fetching data from CSV file to populate the checklist. But when I execute the following code,

dcc.Checklist(

    id='alarm-selection',

    options=[{'label': k, 'value': k} for k in df.TEXT.unique()],

    value=df['TEXT'].unique().tolist(),                    #dropdown value selected automatically when page loads

    persistence=True,                 #remembers dropdown value. Used with persistence_type

    persistence_type='session',         #remembers dropdown value selected until...


)

I am getting the output like this

image
image1555×580 88.9 KB

How to display in a box of specific width and height with a scrolldown.
something like this
image

2

No one knows? Really??

3

Hey @Misha and welcome to the Dash community !

Of course someone knows :slight_smile:

Give this a try:


from dash import Dash, dcc, html
import plotly.express as px

df = px.data.gapminder()
all_countries = df.country.unique()

app = Dash(__name__)

app.layout = html.Div([
    dcc.Checklist(
        id="checklist",
        options=[{"label": x, "value": x} for x in all_countries],
        value=all_countries[:3],
        labelStyle={'display': 'block'},
        style={"height":200, "width":200, "overflow":"auto"}
    )
])

if __name__ == "__main__":
    app.run_server(debug=True)
3 Likes
4

@AnnMarieW Thank you!

1 Like