Multi-value Dropdown covers button when selecting 3 options

Dash Python
1

Hi there,

In my layout I have a button right below a multi-value Dropdown. If I select more than 2 options, the button gets “covered” by the options list so that it is not clickable anymore. Do you have any idea how to handle this?

Obviously I could place the button anywhere else, but I would prefer not to do so. Unfortunately, I can’t arrange the options in a vertical manner as shown here, because the dropdown is inside a dbc.Card with a certain width.

An example:

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

# initialize app
app = Dash(external_stylesheets=[dbc.themes.SLATE])

app.layout = html.Div(
    [
        dcc.Dropdown(
            id='drop',
            style={'backgroundColor': '#40454A',
                   'color': '#40454A',
                   'height': 50,
                   'width': 200
                   },
            className="nav-item dropdown",
            multi=True,
            options=[
                {'label': 'option1', 'value': 1},
                {'label': 'option2', 'value': 2},
                {'label': 'option3', 'value': 3},
                {'label': 'option4', 'value': 4},
                {'label': 'option5', 'value': 5},
                {'label': 'option6', 'value': 6},
            ],
            placeholder='Select option...'
        ),
        dbc.Button(
            'just a button',
            id='btn',
            style={'width': 200}
        )
    ]
)
if __name__ == '__main__':
    app.run_server(debug=True, port=8057)
2

Hi @AIMPED

Try removing the height from the dropdown style:

style={'backgroundColor': '#40454A',
                   'color': '#40454A',
                #   'height': 200,
                   'width': 200
                   },
1 Like
3

Thanks a lot for your answer, @AnnMarieW

Crazy, that actually worked! How is this related? Wasn’t the height for defining the appearance of the Dropdown?

In this case, I wanted the Dropdown to have the same height as an other component (button) which is right above the Dropdown in my layout.

Is there a different way to achieve the same height for both components without specifying the height in the Dropdown component?

4

Yeah, I’m not sure - I think there is some css built into the dropdown that dynamically sets the height – and that doesn’t work anymore when you override it. But I didn’t dig into it much. You could try setting a min height: ie minHeight': 50,

1 Like
5

You were right @AnnMarieW , {minHeight:50} did the trick. I would never have figured that out by myself. Thank you!

1 Like