# Long Dropdown Values Overlap

**URL:** <https://community.plotly.com/t/long-dropdown-values-overlap/14843>\
**Category:** Dash Python\
**Created:** [October 23, 2018, 1:00am UTC](https://community.plotly.com/t/long-dropdown-values-overlap/14843 "2018-10-23T01:00:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucas](https://avatars.discourse-cdn.com/v4/letter/l/ba8739/32.png) [@lucas](https://community.plotly.com/u/lucas)\
**Post date:** [October 23, 2018, 1:00am UTC](https://community.plotly.com/t/long-dropdown-values-overlap/14843/1 "2018-10-23T01:00:56Z")

</div>

This may be a React thing rather than a Dash thing, but I’m having trouble getting the CSS right to avoid my dropdown text values from overlapping. Here’s a visual example:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/cee63e50789c1d31f7a490a641f010e488636d1f.png)

Ideally, the div containing each text element would expand with the text wrap. I’ve tried various style adjustments to both the Dropdown and the parent div, but the best I’ve been able to do is set `style={'white-space':'nowrap'}` on the Dropdown which truncates the values to one line.

If anyone can point me in the right direction, I’d greatly appreciate it!

Code to reproduce:

```auto
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash( __name__ )

app.layout = html.Div(
    [
        html.Label('Multi-Select Dropdown'),
        dcc.Dropdown(
            options=[
                {'label': 'New York City', 'value': 'NYC'},
                {'label': u'Montréal', 'value': 'MTL'},
                {'label': "Some really long city name that doesn't fit on one line not even close it's at least three lines and it overlaps other filters and looks bad", 'value': 'blah'},
                {'label': 'San Francisco', 'value': 'SF'},
            ],
            value=[],
            multi=True,
            style={}
        ),
    ],
    style={'width':'20%'}
)

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

```

Edit: Based on [this post](https://community.plotly.com/t/how-to-colorize-dropdown-field-in-dash/5648) I’ve added **assets/dropdown.css** to override the options CSS. By modifying the VirtualizedSelectOption class I’m able to make some adjustments, e.g.

```auto
.VirtualizedSelectOption {
  overflow: hidden;
  font-size: .8em;
}

```

This helps but still doesn’t adjust the row height, which would be ideal. Also, if I have other dropdowns that don’t have the overlap problem, this method will inadvertently shrink their font size, too.

---

<div class="post-metadata">

**Author:** ![jvt](https://avatars.discourse-cdn.com/v4/letter/j/8797f3/32.png) [@jvt](https://community.plotly.com/u/jvt)\
**Post date:** [February 18, 2019, 10:42am UTC](https://community.plotly.com/t/long-dropdown-values-overlap/14843/2 "2019-02-18T10:42:34Z")

</div>

Try:

`.VirtualizedSelectOption { white-space: nowrap; overflow: scroll; text-overflow: ellipsis; }`

---

<div class="post-metadata">

**Author:** ![Falc](https://avatars.discourse-cdn.com/v4/letter/f/b4bc9f/32.png) [@Falc](https://community.plotly.com/u/Falc)\
**Post date:** [May 20, 2019, 10:46am UTC](https://community.plotly.com/t/long-dropdown-values-overlap/14843/3 "2019-05-20T10:46:20Z")

</div>

Has anyone found a better solution to this problem? It would be ideal to have the heights of the drop down options change as needed so that the values don’t overlap.

---

<div class="post-metadata">

**Author:** ![anlopezl](https://avatars.discourse-cdn.com/v4/letter/a/9dc877/32.png) [@anlopezl](https://community.plotly.com/u/anlopezl)\
**Post date:** [April 30, 2020, 9:52pm UTC](https://community.plotly.com/t/long-dropdown-values-overlap/14843/4 "2020-04-30T21:52:54Z")

</div>

I have this problem too. Is there any solution?

---

<div class="post-metadata">

**Author:** ![pillowtann](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pillowtann/32/11609_2.png) [@pillowtann](https://community.plotly.com/u/pillowtann)\
**Post date:** [July 1, 2020, 9:27am UTC](https://community.plotly.com/t/long-dropdown-values-overlap/14843/5 "2020-07-01T09:27:37Z")

</div>

Hi! Commenting on an old thread in case people do not realise this feature is already available (like myself at first).  
You can resolve this issue using **optionHeight** as follows:

```auto
                                                        dcc.Dropdown(
                                                            id='dropdown-name-id',
                                                            multi=True,
                                                            optionHeight=120
                                                        )

```

This is based on the documentation at [plotly](https://dash.plotly.com/dash-core-components/dropdown)  
But it does mean that all the options increase in height even if not needed to.

---

<div class="post-metadata">

**Author:** ![nyck33](https://avatars.discourse-cdn.com/v4/letter/n/a8b319/32.png) [@nyck33](https://community.plotly.com/u/nyck33)\
**Post date:** [December 3, 2020, 8:36am UTC](https://community.plotly.com/t/long-dropdown-values-overlap/14843/6 "2020-12-03T08:36:00Z")

</div>

is there anything better now?

---

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [March 26, 2021, 1:28pm UTC](https://community.plotly.com/t/long-dropdown-values-overlap/14843/7 "2021-03-26T13:28:06Z")

</div>

> [@pillowtann](#):
>
> `optionHeight=120`

Thank you this worked for me!