Add line break in dcc.Dropdown option

Dash Python
1

Hi,
I want to create dcc.Dropdown with line braks, because I have long strings in my options.
Current example (open dropdow option):
1.this is my first option choose dog
2.this is my second option choose cat
I want to have:
1.this is my first option
choose dog

2.this is my second option
choose cat

I already tried to add \n between those words but dcc.Dropdown still keeps it in one row.
Can I change it somehow?

2

Hi @kilobit

As of Dash 2.5.1 the dcc.Dropdown , dcc.Checklist , and dcc.RadioItems accept components for label

See more examples in the dropdown docs

Here are two ways to format the labels. The first uses html.Pre to preserve the line breaks and white space. The second uses a dcc.Markdown component and Markdown syntax. Note that with Markdown, you need two spaces as the end of a line to force a line break.


from dash import Dash, dcc, html

app = Dash(__name__)

options1 = [
    {"label": html.Pre("1.this is my first option \n choose dog"), "value": "dog"},
    {"label": html.Pre("2.this is my first second \n choose cat"), "value": "cat"},
]


options2 = [
    {"label": dcc.Markdown("1.  this is my first option  \n choose dog"), "value": "dog"},
    {"label": dcc.Markdown("2.  this is my second option  \n choose cat"), "value": "cat"},
]


app.layout = html.Div([
    dcc.Dropdown(options=options1),
    dcc.Dropdown(options=options2),    
])


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