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:

[ROSHANDBIT]

add to <select /> menuPlacement = “top”

[MartinHaeusler]

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.