React-select: Hack: Showing dropdown on top of select input
Saw some issues on this topic, but no activity or merged PRs. Here's a quick hack you can do to get the dropdown menu going in the up direction. Paste the following into your CSS file. Wrap your <Select /> component in a div with the select-up class included.
.select-up .Select-menu-outer {
position: absolute !important;
top: auto !important;
bottom: calc(100% - 1px) !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
}
.select-up .is-open .Select-control {
border-top-right-radius: 0 !important;
border-top-left-radius: 0 !important;
border-bottom-right-radius: 5px !important;
border-bottom-left-radius: 5px !important;
}
Example Usage:
<div className="select-up">
<Select />
</div>
Preview:
shivpatel
All 9 comments
@JedWatson is this something we would like to support in react-select?
export-mike
on 2 Apr 2017
@shivpatel This fix always opening the dropdown in up direction. Dropdown options should open only in up direction, if it reaches to the edge of the window.
kuppula-pmap
on 6 Apr 2017
@kuppula-pmap This was designed to be a quick fix/hack for anyone that wanted to force an upward facing react select component in their app. See these issues (#1479, #1515) for progress on a real component-level fix.
shivpatel
on 6 Apr 2017
@shivpatel @JedWatson is there a component-level fix for this i need for my requirement too ..
BopaiahMD
on 21 Jun 2017
Hi,
based on your idea with the CSS modification I created a quick-and-dirty wrapper component that performs some DOM node calculations and tries to estimate the visual height of the menu. When this estimate fits into the screen below the select element, the overlay is displayed below it, otherwise it is displayed above the select element.
https://gist.github.com/MartinHaeusler/6dfc3769df20f534a150efda39573f0d
This is really dirty stuff, but it "works for me". If you use different font heights etc. then you might need to adjust the constants.
This functionality (not my implementation of it, mind you) desperately needs to be part of react-select.
MartinHaeusler
on 8 Jul 2017
these styles must go in as a prop to enable or disable!
馃憤 real nice hack @shivpatel
dixitk13
on 18 Apr 2018
css not working for me
kinizumi
on 19 Aug 2019
add to
menuPlacement = "top"
ROSHANDBIT
on 9 Mar 2020
Hi all,
It appears menuPlacement='top' solves this issue as per sandbox below, if this is incorrect, please let me know and I'll reopen and investigate, thank you.
Example - https://codesandbox.io/s/react-select-v3-sandbox-o0dfx
bladey
on 17 Jun 2020
Related issues
MalcolmDwyer
路
3Comments
x-yuri
路
3Comments
yrabinov
路
3Comments
juliensnz
路
3Comments
mjuopperi
路
3Comments
Most helpful comment
add to
menuPlacement = "top"