AIMPED
February 10, 2023, 6:52pm
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/
AIMPED
February 10, 2023, 8:43pm
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?
Try setting the bottom of the menu to be the top of the other element.
AIMPED
February 10, 2023, 9:02pm
4
I think this works:
.Select-menu-outer {
top: 0;
-webkit-transform: translateY(-100%)
transform: translateY(-100%);
}
2 Likes
AIMPED
February 10, 2023, 10:19pm
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