dcc.Dropdown, DropdownMenu direction

Dash Python
1

Hi there,

I wonder if there is a way to change the drop- direction of the dcc.Dropdown(), instead of opening the options menu to the bottom, open it to the top.

I know that this option exists in the dbc.DropdownMenu(), but I would like to keep the selected options visible like dcc.Dropdown() does, especially if using multi=True.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/dropdown_menu/

2

So I’m halfway thru.

I managed to do this by css:

.Select-menu-outer {
    -webkit-transform: translateY(-32px) translateY(-100%);
    transform: translateY(-32px) translateY(-100%);
}

The 32px is the height of the parent div, I would really prefer to not hard code this. Any Ideas?

3

Try setting the bottom of the menu to be the top of the other element. :slight_smile:

4

I think this works: :confetti_ball:

.Select-menu-outer {
    top: 0;
     -webkit-transform: translateY(-100%)
    transform: translateY(-100%);
}
2 Likes
5

I finally made it. I added a className since I didn’t want to apply the css to all dcc.Dropdown() in my app.

Here a MRE:

import dash
from dash import html, dcc

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.Div(
            [
                dcc.Dropdown(
                    options=[1, 2, 3],
                    multi=True,
                    style={
                        'width': '100%',
                        'margin-bottom': '20px'
                    },
                    className='dropUp'
                ),
                dcc.Dropdown(
                    options=[1, 2, 3],
                    multi=True,
                    style={'width': '100%'}
                )
            ],
            style={
                'position': 'absolute',
                'bottom': '0px',
                'width': '100%'
            }
        )
    ],
    style={
        'position': 'relative',
        'height': '200px'
    },
)

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

custom.css (in the assets folder):

.dropUp .Select-menu-outer {
    top: 0;
     -webkit-transform: translateY(3px) translateY(-100%);
     transform: translateY(3px) translateY(-100%);
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
     border: 1px solid #ccc;
     border-bottom: none;
}

EDIT: I tweaked the styling a bit, it looks pretty similar to the standard drop down now.

1 Like