dcc.Dropdown, DropdownMenu direction

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