[BUG] maxHeight doesn't extend background height in dcc.Dropdown

[pfbuxton]

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: https://dash.plotly.com/dash-core-components/dropdown 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).

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
)

Note, this issue was reported in https://github.com/plotly/dash/issues/2225 but the fault was incorrectly attributed to interaction with DataTable.

[nickmelnikov82]

This error is caused by a special CSS class used for documentation. A fix is currently under development and will be available soon

[pfbuxton]

Hi @nickmelnikov82, I'm still having this issue. Could you please explain what the fix was for the special CSS class? Thanks.

[pfbuxton]

As a very temporary workaround you can choose the color of the dropdown by adding this custom css:

.Select div {
    background-color: #FFFFFF;
}

[Coding-with-Adam]

I wasn't able to replicate the error. For me, Rome is still within the white background.

from dash import Dash,dcc, html

app = Dash()
app.layout = html.Div([
    dcc.Dropdown(
        ['New York City', 'Montreal', 'Paris', 'London', 'Amsterdam', 'Berlin', 'Rome'],
        'Paris', id='height-example-dropdown', maxHeight=300
    ),
    dcc.Markdown("another section under the dropdown")
])

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

[aGitForEveryone]

I want to bump this issue again. The problem still occurs, but only when adding a dash_table.DataTable() component to the layout. I created a forum post describing the issue with a minimal example. @Coding-with-Adam just add an empty dash_table.DataTable() component to your example and you should see the issue appearing. I tested in a fresh environment with pip install dash, so everything on the latest version.

https://community.plotly.com/t/maxheight-doesnt-extend-background-height-in-dcc-dropdown/75736/6

[aGitForEveryone]

Identified issue

The react-select.css styling overrides the Dropdown.css styles when a dash_table.DataTable() component is added to the layout, undoing the maxHeight setting in dcc.Dropdown.

Suggested solution

The styles from Dropdown.css should either get higher priority than react-select.css or it should be added to element.style instead.

Edit: Looking at the current style, the max height override is added for class .dash-dropdown .Select-menu .Select-menu-outer. However, this class combination is ranked lower than the class .dash-dropdown .Select-menu-outer. So removing the .Select-menu class should solve the issue.

Workaround

Adding the custom styling

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

will undo the dash_table styling and again give control of the menu height to the maxHeight property.

Investigation

After checking the css styles of the dropdown menu in the Chrome developer tools, I found the source of the issue.

When opening the dropdown menu, the element with class Select-menu-outer appears. When a dash_table.DataTable() component is added to the layout, the css style looks like this:

If I remove the dash_table.DataTable() from the layout, the css style looks like this:

If you look carefully in the css styling when no DataTable is present (second image). There you see that originally the max-height is also set to 200px, but then that property is overridden by the Dropdown.css class and set to none. Which allows the background to extend behind all options.

In my example I set maxHeight=500, had optionHeight=50 and only had 7 entries, which is 350px in total. Most likely the dcc.Dropdown sets max-height: none (and not a specific number), because the 350px did not exceed the 500px that was defined in dcc.Dropdown.

Now, if you look at the styles when a dash_table.DataTable() was added to the layout, we see that the react-select.css styles were added in such a way that they override all the previous styles. The problem is the max-height: 200px; property that exists in the .Select-menu-outer class styling from react-select.css. This overrides the max-height: none that was set in the Dropdown.css style, resetting it to the original 200px max.

Note: If you want to inspect the Select-outer-menu component in the developer tools you have to disable the blur event listener, see https://stackoverflow.com/questions/29386116/inspecting-drop-down-menus-in-new-chrome. Otherwise, the dropdown menu will always close when clicking anywhere outside the dropdown menu.

1. Select the dash-dropdown component in the Elements tree
2. Go to the Event Listeners tab in the Styles window that opens
3. Unfold the Blur event listener and click the remove button to delete it.
4. The dropdown menu will now stay open when clicking the element in the Elements tree