Modify labels in dropdown boxs -> simple question!

Dash Python
,
1

Hi Dash gurus,
I got a questions in ‘options’ in dropdown box.

lets say I have a very long city name list to be contained in dropdown.

However, in the dropdown box, I want to only display the first three characters of the city name.
In documentation , I can do that manually, but I wonder if there is any handy way to do this (?)

Thanks

city_names = ["New York City", "Montreal",  "San Francisco"  .......  ]

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown",
            className="inputbox-long",
            options=[
                {"label": "New ", "value": "New York City"},
                {"label": "Mon", "value": "Montreal" },
                {"label": "San", "value": "San Francisco"},
                {"label": "Lon", "value": "London"},
                {"label": "Wat", "value": "Waterloo" },
                {"label": "Edi", "value": "Edinburgh"},
                {"label": "Man", "value": "Manchester"},
                {"label": "Sin", "value": "Singapore" },
                {"label": "Par", "value": "Paris"},
                {"label": "Mil", "value": "Milan"},
                {"label": "Bar", "value": "Barcelona" },
                {"label": "Sha", "value": "Shanghai"},
                 ..........
            ],
            placeholder="Select one or more",
            multi=True,
        ),
        html.Div(id="output"),
    ]
)


@app.callback(
    Output("output", "children"), Input("dropdown", "value"),
)
def update(value):    
    return value


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

hi @TristanSun
welcome back.

If I understood the question correctly, you would like a quick/automated way to show the first three letters of a city name in the label of the dropdown. I haven’t worked with regex for a while, but I’m pretty sure you can set it up to loop over the list of cities and create a new list - with regex - of only the first three letter of each city.

Then, once you have your new three_letter_city list, you could:

from dash import Dash, html, dcc, callback, Output, Input

app = Dash(__name__, use_pages=False)

cities = ["New York City", "Montreal",  "San Francisco"]
three_letter_city = ["New","Mon","San"]

app.layout = html.Div([
    dcc.Dropdown(
        id="dropdown",
        className="inputbox-long",
        options = [
            {"label": shorter, "value":longer}
            for shorter,longer in zip(three_letter_city, cities)
        ]
    )
])


if __name__ == "__main__":
    app.run_server(debug=True)
1 Like
3

OK, so this is fun! I like Adam’s answer. Here’s another thing you can do if you are using Dash >2.5 Now you can put components in options - so you could add a tootiip with the complete city name.

Here’s an example:

tootipdropdown


from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

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

cities = [
    "New York City",
    "Montreal",
    "San Francisco",
    "Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu",
]


def make_tooltip(city):
    return html.Div(
        [
            html.Span(city[:3], id=f"tooltip-target-{city}"),
            dbc.Tooltip(city, target=f"tooltip-target-{city}"),
        ]
    )


app.layout = dbc.Container(
    [
        dcc.Dropdown(
            id="dropdown",
            options=[{"label": make_tooltip(city), "value": city} for city in cities],
        )
    ]
)


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

Wow .

Thats very elegant !

Thank you @Ann !!!

1 Like