✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to modify the length of a dropdown list?

Dash
#1

I have a dcc.Dropdown() item on my dashboard that upon clicking only displays about 5 items worth of content. It’s a pretty long list, so I’m hoping to show more items. How do I modify this?

I tried dcc.Dropdown(..., style={'height': '50px'})but that only changed the height of the dropdown box itself, not the length of the list upon clicking.

#2

Is the dropdown list not scrollable? This code has a dropdown with 50 options and should be scrollable. If it works, you might want to check CSS etc.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options = [
            dict(label=n,value=n)
            for n in range(50)
        ]
    )
])

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

I think the author of the question referred to the number of visible rows for the dropdown list that you see prior to scrolling.

I have this question too, I would like to see more options. How can I do that?

#4

I am having the same issue and wondering if this is possible. I don’t think the functionality is built into the dropdown core component and I have been unsuccessful at getting something to work in the CSS file. I can write the code in CSS and get the list size to change but can’t figure out how to write this in the CSS framework file. Any help would be much appreciated.

.dropdown-content {
position: absolute;
height: 500px;
}

#5

Yes I have this question too. I would like to control how many items are visible at once in a dropdown. With my styling, I get 10 but if I have say 11 items, I would like to make them all display without a scrollbar. Scrolling is great for dropdowns with many options.