maxHeight doesn't extend background height in dcc.Dropdown

Dash Python
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