maxHeight doesn't extend background height in dcc.Dropdown

Dash Python
1

The “maxHeight” prop should expand the height of the dropdown, which it does. However, it does not expand the height of the background.

If you have a look at the Dash example: Dropdown | Dash for Python Documentation | Plotly you can see that normally “Rome” would not fit on the dropdown. With maxHeight=300 “Rome” now fits in the dropdown, but but the white background height has not been increased (same issue in dark mode).
Capture

Minimal example of issue taken from dash dash/documentation

from dash import dcc dcc.Dropdown( [‘New York City’, ‘Montreal’, ‘Paris’, ‘London’, ‘Amsterdam’, ‘Berlin’, ‘Rome’], ‘Paris’, id=‘height-example-dropdown’, maxHeight=300 )

2

Hi @Volodia

I see the issue in the docs, but running that minimal example on it’s own, everything looks fine. It might be just be an issue with some custom CSS that’s used in the docs.

2 Likes
3

Indeed that comes from a custom CSS class used for the docs.
A patch is pending, should be live tomorrow max :+1:

Thank you @Volodia !

3 Likes
4

I have this issue currently while running Dash 2.17.0. If I run the minimal example from the docs, everything is fine, though in my actual dashboard, the background is not correctly extended. I have looked at my custom CSS styling but I can’t really see what is interfering here. Any direction what is overriding the dropdown styling? I am using the external style sheet dbc.themes.BOOTSTRAP.

The custom stylings that I have are either updating colors or very specific parts of components (none of which I can really relate to the dropdown).

Any idea what class to look for, or is the overwriting coming from the BOOTSTRAP styling?

5

Hi @Tobs

Can you make a minimal example that we can run that shows the same issue?

6

Hi Ann Marie,

It took me a while to find some time and then another while to actually isolate the issue. And I found it. The issue is with dash_table. Below is a small example to demonstrate the bug. I tested this in a fresh virtual environment where I just installed the latest version of Dash and its dependencies

pip install dash

The bug appears when a dash_table.DataTable() component exists in the layout. It doesn’t need to contain any data. When I run the example below, I get

dropdown_background_not_extended

As you see, the dropdown background does not get extended. When I comment the dash_table.DataTable(), line, the background is properly extended

dropdown_background_extended

I added another line where the DataTable is part of an html.Div which is hidden, to show that the bug also appears in that case.

My conclusion here is that initializing a DataTable somehow loads extra styles that interfere with the dropdown. Note that there is no custom styling defined, the example works as-is.

I guess I should create a github issue on this.

Edit: There are actually already issues posted on this issue:

# app.py
from dash import dcc, Dash, html, dash_table

app = Dash(__name__)


app.layout = html.Div(
    children=[
        # html.Div([dash_table.DataTable()], style={"display": "none"}),
        dash_table.DataTable(),
        dcc.Dropdown(
            options=[
                {"label": i, "value": i}
                for i in [
                    "New York City",
                    "Montreal",
                    "Paris",
                    "London",
                    "Amsterdam",
                    "Berlin",
                    "Rome",
                ]
            ],
            value="New York City",
            optionHeight=50,
            maxHeight=500,
        ),
    ],
)
1 Like
7

Hi @Tobs

Thanks for the good detective work- that was very helpful! :mag:

Here is a workaround for now, and I’ll look into doing a PR to fix to the css in DataTable


.Select-menu-outer {
  max-height: none !important
}
1 Like
8

Hi @AnnMarieW,

I added some more info in the github issue: [BUG] maxHeight doesn't extend background height in dcc.Dropdown · Issue #2529 · plotly/dash · GitHub. Showing how the styles get overriden when a dash_table.DataTable() component is added to the layout.

I made a suggestion for how that could be solved, but I don’t know how to implement that.

Edit:
Trying out your solution, I found that this also works. This combination is located higher in the css styling list, so you can circumvent the use of the !important keyword.

.dash-dropdown .Select-menu-outer {
  max-height: none;
}

Edit 2:
For those using this workaround: you still need to set the maxHeight property in dcc.Dropdown besides the extra css style to enable the extension of the dropdown menu. Secondly, don’t set a value in the custom css style, set it to none. Otherwise, you can get interference between what is set in the custom css style and what is set by maxHeight. By setting the custom css to none, the behavior is fully controlled by the maxHeight property, just as intended.

1 Like
9

Hi @Tobs

I just made a PR to fix this :slight_smile: fix dropdown css by AnnMarieW · Pull Request #2880 · plotly/dash · GitHub

Thanks for raising the issue again, and all your help narrowing down the problem.

1 Like