Height of expanded Dropdown menu

Dash Python
#1

Hello forum!

I wonder how to increase the expanded height of my dropdown menu. I have a dropdown menu with many options ~50. The menu is quite short in its expanded form (only several options are visible). In order to see the bottom options, the user needs to scroll a lot.

Is there a way how to influence the height of an expanded dropdown and thus also the number of options that are shown? I suppose it will be through some css property, but I don’t have any experience with css and don’t know, how to determine the property of interest.

image
image815×333 16.6 KB

dcc.Dropdown increase the dropdown size
#2

I tried customizing css

.Select-menu-outer {
   max-height: 400px;
}

with no success.

#3

If you right click your webpage and select “Inspect” (for chrome, other browsers will have something similar) you will get a menu that shows all the html and css contained in that webpage. Clicking the little square icon with an arrow in (usually at the top left) will let you select the element you want to examine the css styling details for. You can even make temporary css changes just to see what they will look like by adding css rules in the Styles tab (add your css rules inside element.style {}). Once you figure out the specific element and how you want to change it, just write the appropriate css selector and rule in your css file and refresh the page.

This is also a good troubleshooting step to see if the styling in your css file is being overwritten by other styles, as it would show overwritten rules with a line through them.

Here’s a general reference: https://www.lifewire.com/get-inspect-element-tool-for-browser-756549

you can try testing out the min-height, height, and max-height properties to see how you like it.
MDN is a good reference for css properties: https://developer.mozilla.org/en-US/docs/Web/CSS/height

1 Like
#4

Thanks @stalecupcakes for the instructions. They helped me to figure out how to set css styles for a bunch of other components and use cases. However, I’m still struggling with setting the height of an expanded dropdown menu. I’m giving up for now, perhaps I’ll figure it out later in the future.

#5

After looking at the source code directly on github (https://github.com/bvaughn/react-virtualized-select/blob/master/styles.css)
I think the element you want to target is:

.VirtualSelectGrid {
  z-index: 1;
  min-height: 500px !important;
}

I set the minimum height manually to 500px just as an example, and you can use the !important keyword in css rules to override all other styles that might affect that component. Note that ALL dropdowns will be affected by this, so I wouldn’t recommend it. The author of the code wrote it so that the height adjusts appropriately with the number of options in the dropdown so that it works for any sized list. By setting the min-height, you can say that all dropdowns will be at least this height, but still has the ability to expand if it needs to.

You can potentially target specific child elements (such as this select grid, which is a descendent of the parent dash dropdown) using css selectors as well, but it might be complicated for this case. Reference: https://css-tricks.com/child-and-sibling-selectors/

#6

Thank you for all the effort @stalecupcakes! However, this still doesn’t work for me. :frowning:

image
image2043×730 115 KB

using:

dash 1.4.1
dash-bootstrap-components 0.8.1

on Windows

#7

hey @sislvacl have you found out a solution since ?

thanks in advance !

#8

Unfortunately, I have not

#9

Unfortunately as well as being hard coded in the dcc CSS, you’d need to pass the maxHeight prop to the VirtualizedSelect component inside dcc.DropDown. This would work out-of-the-box if maxHeight were a declared prop of dcc.DropDown, but I’ve found a workaround that seems to be working for me:

def add_custom_props(component: Component, **kwargs) -> Component:
    prop_names: List[str] = component._prop_names
    new_props = set(kwargs.keys()) - set(prop_names)
    if new_props:
        prop_names.extend(new_props)
    for k, v in kwargs.items():
        setattr(component, k, v)
    return component

# ...

my_dropdown = add_custom_props(dcc.Dropdown(...), maxHeight=500)

/* CSS: */
.Select-menu, .Select-menu-outer {
    max-height: 500px;
}