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%);
}
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.
mred css

6

Thank you @AIMPED, that solution was very useful for me.

I wonder if something similar can be done with dbc.NavbarSimple(fluid=True). I have a similar problem there. The navbar is placed at the bottom of my pages. On large screens it is always spread horizontally. But on small screens it collapses and opens up vertically, in the down direction…