CODEWITHSUNDEEP
reactjsreact-select
Muljayan
Muljayan

Reputation: 3886

How to make react-select options scrollable

I have a list of options in being displayed in react-select. Since this component is at the lower edge of the screen the items tend to get cut off from the screen.

I noticed the selection lists provided in the official react-select provided has a scroll bar. I have tried looking at the docs and the GitHub page but i still couldn't figure out a solution.

The below image shows how my react-select options list is displayed.

This is how my react-select options list is displayed

My question is how do i make the list displayed to be scrollable.

The following is the code I have used.

import Select from 'react-select';

const SearchSelect = (props) => {
  const { options, defaultValue, onChange, name, label } = props;
  return (
    <>
      {label && <label htmlFor="search-select">{label}</label>}
      <Select
        options={options}
        defaultValue={defaultValue}
        onChange={onChange}
        name={name}
        id="search-select"
      />
    </>
  );
};

The option values are initially taken from an API and are passed into this component from the parent.

Upvotes: 11

Views: 32651

Answers (2)

Jatin Kaushik
Jatin Kaushik

Reputation: 171

const menuPortalTarget = document.getElementById('root');
<Select
    maxMenuHeight={220}
    menuPlacement="auto"
    menuPortalTarget={menuPortalTarget}
/>

enter image description here

maxMenuHeight - limit your menu height to the given input in my case it limits at 220px and then you can see in image scroll bar is added.

menuPlacement - it can show your menu above or below your select input according to available space in auto

Upvotes: 5

Airat Zhanshuakov
Airat Zhanshuakov

Reputation: 456

You can play with the maxMenuHeight prop:

<Select maxMenuHeight={250} />

Upvotes: 28

Related Questions