React JS : React Select Dropdown position to top if there is no space below

user_12147337 0
Viewed 29488

I am using React Select

I want its Dropdown position to be dynamic. let's say if there is no space below it, then the dropdown should be opened to above select box.

<Select
  value={selectedOption}
  onChange={this.handleChange}
  options={options}
/>

Is there any option to make dropdown position dynamic?

Any help would be great.

Thank You.

react-select reactjs select javascript
4 Answers

You can use menuPlacement option on your Select component with "bottom" (default), "top" or "auto".

You can see other props here ;)

user_76775480 
<Select
  menuPlacement="top"
  ...
/>

You can use menuPlacement prop top, bottom or auto

user_145261250

Inside component:

render() {
    const className = this.state.dropUp ? 'drop-up' : '';

    return (
      <Select {...this.props} className={className} />
    );
  }

And in css file:

.drop-up .Select-menu-outer {
  top: auto;
  bottom: 100%;
}
Admin1

<Select menuPortalTarget={document.body} menuPosition={'fixed'} />

After hours of finding the solution.This perfectly worked for me.

user_172779710
Related