Problem with Dropdown

I am currently trying to add a simple dropdown to my dashboard. Unfortunately, I have the issue, that if I click on the down button to show the choices, the list ist empty. Only wenn I write something in the search field, the items show up.

It appears to be a problem somehow as soon as I add more items that warrants a scrollbar in the selector. I have tried it on different PCs, all the same results. However, it only appears to happen in Chrome, works fine in Edge.

Can you post a layout fragment with the dcc.Dropdown in it and which yields this behaviour?

Sure, that’s the code:

html.Div([
html.Label(‘bla:’),
dcc.Dropdown(
id=‘tmp’,
options=[
{‘label’: ‘a’, ‘value’: ‘a’},
{‘label’: ‘b’, ‘value’: ‘b’},
{‘label’: ‘c’, ‘value’: ‘c’},
{‘label’: ‘d’, ‘value’: ‘d’},
{‘label’: ‘e’, ‘value’: ‘e’},
{‘label’: ‘f’, ‘value’: ‘f’},
{‘label’: ‘g’, ‘value’: ‘g’},
{‘label’: ‘h’, ‘value’: ‘h’}
],
value=‘a’
)])

That dropdown works fine for me on both Chrome and Firefox – running on Ubuntu. Perhaps this is a platform specific quirk. This wouldn’t necessarily surprise me – I’ve seen the dropdown component mangling some text before (I think when the text wraps over the width of the box) so it’s possible that it has a few rough edges with how it styles the items.

All I can suggest is playing around with the CSS styles of the elements of the dropdown component and see if you can fix it.

1 Like

Hi,

Did you resolve this issue? I have same problem…

Same problem.
Under the Chrome, it doesn’t work. Safari works.

Update:
The dash_core_components version=0.9.0 solves the problem.

the 0.9.0 works fine for Dropdown, but it doesn’t support Violin figure.

The newest version 0.29.0, 1.0.0rc1 still has the problem.

We’re trying to triage this problem in this issue on GitHub: https://github.com/plotly/dash-core-components/issues/305. So far, none of the maintainers have been able to reproduce the issue.

I was running into the same problem. Five listboxes, first two were not showing options. Removed column styling and the issue was resolved. And the problem was only with chrome, all five listboxes were working fine in edge.

I have experienced something similar about the styling.

when I use a Dropdown component without any style setting to the html.DIV component, it works fine all labels are displayed in the Dropdown once clicked, also in Chrome. but when I add style I get that the Dropdown doesn’t display anything, though it is clickable (only once), I can click the white (no text) Dropdown list and get one of my labels selected. though in Internet Explorer it works in both cases.

I am facing the same issue with dcc version 0.45.0.
I have uploaded detailed problem at below link

After updating the dcc to 0.46.0 now my dropdown function does not work at all.
Just the blank screen appears.