# Problem with Dropdown

**URL:** <https://community.plotly.com/t/problem-with-dropdown/6691>\
**Category:** Dash Python\
**Created:** [November 7, 2017, 1:16pm UTC](https://community.plotly.com/t/problem-with-dropdown/6691 "2017-11-07T13:16:50Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![killver](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/killver/32/1693_2.png) [@killver](https://community.plotly.com/u/killver)\
**Post date:** [November 7, 2017, 1:16pm UTC](https://community.plotly.com/t/problem-with-dropdown/6691/1 "2017-11-07T13:16:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [November 7, 2017, 1:24pm UTC](https://community.plotly.com/t/problem-with-dropdown/6691/2 "2017-11-07T13:24:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![killver](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/killver/32/1693_2.png) [@killver](https://community.plotly.com/u/killver)\
**Post date:** [November 7, 2017, 1:41pm UTC](https://community.plotly.com/t/problem-with-dropdown/6691/3 "2017-11-07T13:41:07Z")

</div>

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’  
)])

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [November 8, 2017, 10:07am UTC](https://community.plotly.com/t/problem-with-dropdown/6691/4 "2017-11-08T10:07:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![freshwuzhere](https://avatars.discourse-cdn.com/v4/letter/f/b5e925/32.png) [@freshwuzhere](https://community.plotly.com/u/freshwuzhere)\
**Post date:** [May 26, 2018, 3:42pm UTC](https://community.plotly.com/t/problem-with-dropdown/6691/5 "2018-05-26T15:42:37Z")

</div>

Hi,

Did you resolve this issue? I have same problem…

---

<div class="post-metadata">

**Author:** ![a3801283](https://avatars.discourse-cdn.com/v4/letter/a/35a633/32.png) [@a3801283](https://community.plotly.com/u/a3801283)\
**Post date:** [August 26, 2018, 5:02am UTC](https://community.plotly.com/t/problem-with-dropdown/6691/6 "2018-08-26T05:02:59Z")

</div>

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

Update:  
The dash\_core\_components version=0.9.0 solves the problem.

---

<div class="post-metadata">

**Author:** ![a3801283](https://avatars.discourse-cdn.com/v4/letter/a/35a633/32.png) [@a3801283](https://community.plotly.com/u/a3801283)\
**Post date:** [September 18, 2018, 9:29am UTC](https://community.plotly.com/t/problem-with-dropdown/6691/7 "2018-09-18T09:29:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [October 17, 2018, 6:17pm UTC](https://community.plotly.com/t/problem-with-dropdown/6691/8 "2018-10-17T18:17:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jerel](https://avatars.discourse-cdn.com/v4/letter/j/eada6e/32.png) [@Jerel](https://community.plotly.com/u/Jerel)\
**Post date:** [October 25, 2018, 3:01pm UTC](https://community.plotly.com/t/problem-with-dropdown/6691/9 "2018-10-25T15:01:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![SashaFin](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@SashaFin](https://community.plotly.com/u/SashaFin)\
**Post date:** [November 12, 2018, 9:48am UTC](https://community.plotly.com/t/problem-with-dropdown/6691/11 "2018-11-12T09:48:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![prasadovhal](https://avatars.discourse-cdn.com/v4/letter/p/ebca7d/32.png) [@prasadovhal](https://community.plotly.com/u/prasadovhal)\
**Post date:** [April 11, 2019, 7:21am UTC](https://community.plotly.com/t/problem-with-dropdown/6691/12 "2019-04-11T07:21:29Z")

</div>

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

> [@Dropdown update problem](https://community.plotly.com/t/dropdown-update-problem/22014):
>
> I have created 2 dropdowns. both of them fires on single button. 4 days back this layout was working great. But since few days back only one callback is firing and not other one. I tried to look into the callback which was not firing. It turns out the callback firing but it is not returning anything. I tried to print everything till return of the same callback. everything prints well. Are there any changes has been made in core components? Please help with problem. Code is as follow: app.…

---

<div class="post-metadata">

**Author:** ![prasadovhal](https://avatars.discourse-cdn.com/v4/letter/p/ebca7d/32.png) [@prasadovhal](https://community.plotly.com/u/prasadovhal)\
**Post date:** [April 12, 2019, 11:34am UTC](https://community.plotly.com/t/problem-with-dropdown/6691/13 "2019-04-12T11:34:11Z")

</div>

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