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,…

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( …

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?

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

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 …

dcc.Dropdown, DropdownMenu direction

Dash Python

AIMPED February 10, 2023, 9:02pm 4

I think this works:

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

Dropdown expand list width

Topic		Replies	Views
Creating drop-down such that the Select-array span comes left in dropdown Dash Python	1	274	September 26, 2023
Creating dynamic dropdowns using dash clientside callbacks Dash Python question	5	197	November 5, 2024
Increase height and fontsize of dcc.Dropdown Dash Python	1	275	August 7, 2024
dcc.Dropdown menu items text alignment Dash Python	5	4397	February 11, 2022
Dropdown expand list width Dash Python	3	830	February 21, 2023

dcc.Dropdown, DropdownMenu direction

Related topics