Display "5 items have been chosen" instead of "[Red] [Green] [Blue] [Yellow] [Purple]" in a Dash Dropdown

Dash Python
1

Hello,

I am trying to create an application where I need a Multi-Dropdown which have a lot of possible values that can be chosen.

However, when I have chosen more values than the “regular” Dropdown can fit, the height of the dropdown increases. I assume this is done to allow the user to see all the chosen items.

Instead of an increased height of the dropdown I would like the chosen items to change into a text that tells the user how many items that have been checkedm, for example “x items have been chosen”.

I went to the github for Dash, GitHub - plotly/dash: Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required., and located the file for the Dropdown. In that file there is a callback named “selectedOption” which I thought was possible to do some changes to too achieve my idea.

When I tried to find this file on my computer I was not able to locate it. My assumption here is that this is only used as a foundation and is not included in the installed package.

My question is, if it is possible to solve my problem either by a predefined function or any other easy solution, or do I have to create my own component? In that case I have to look over other possibilities due to my lack of knowledge, and might return to this solution when I have learned more :slight_smile:

Since I am asking a question regarding Dropdown I might ask another in the same post.
Is it possible to not show the possible values until the user have searched with x number of characters? There might be performing issues if the list get’s to long.

2

Hello Kycklingbiff

Take a look this information, I hope this can help.

3

Hello Samuel,

Thanks for the quick reply.

I looked through that post and I couldn’t find the solution of my issue. That is great that it’s possible to adjust the height when the dropdown is “open”.

I might have been a bit loose in my description. It might be easier if I explain with pictures (taken from Dash)

When 4 values are chosen, the dropdown keeps it size.

image
image803×103 1.61 KB

image
image823×141 5.3 KB

However, when I add more, the height increases

image
image807×284 18.9 KB

Instead, I would like the size to remain the same and (in this example) say “14 items slected”.

4

hi @Kycklingbiff
I don’t think this is possible with the current Dash Dropdown props. You might have to create your own component or tweak the existing one.

@snehilvj
Is this possible with the multiSelect in Dash Mantine?