Dash Multi-Value Dropdown wrapping text skips the first line

Question

I'm making a Dash Multi-Value Dropdown and finding that long labels use a text wrapping process that skips the first line entirely.

When I make a Dash Multi-Value Dropdown like this:

dcc.Dropdown(
    options=[
        {
            'label': str(entity),
            'value': entity,
            'title': entity,
        }
        for entity in entity_list
    ],
    multi=True,
    optionHeight=55,
    value=entity_list,
)

Longer labels, like the 3rd row in this screenshot, use a text wrapping process that skips the first line entirely.

The issue is shown in the middle row here:

Is there a way to make those labels wrap text in a way that includes the first line? Even inelegant/hacky solutions are appreciated!

Answer 1

You can add explicit line breaks (\n) wrapped in html.Pre to preserve the line breaks and white space:

from dash import Dash, html, dcc


app = Dash()

entity_list = ['vital sign measurements', 'vital sign\nmeasurements']

app.layout = [html.Div(
            [
    dcc.Dropdown(
        options=[
            {
                'label': html.Pre(entity),
                'value': entity,
                'title': entity,
            }
            for entity in entity_list
        ],
        multi=True,
        value=entity_list,
    )],
            style={"width": "10%"},
    ),
]


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