1

We currently have a select made in React with ReactSelect that has a fixed 16 options in the table. Currently, when the control is clicked, the menu appears which shows 11 items and has a vertical scroll to scroll down to show the remaining 5 items.

This would be better if all 16 items showed when menu appeared, with no vertical scroll. We have tried to create the following custom style:

    menu: (provided) => ({
        ...provided,
        background: '#DDDDDD',
        marginTop: '-1px',
        zIndex: 10,
        height: // what to put here? we've tried "auto", "fit-content", "100%" and none are good...
    }),

is there another element in the select (other than menu) that we should be styling, or is there a better way to style the menu such that all options show?

Thanks!

Canovice
  • 9,012
  • 22
  • 93
  • 211

1 Answers1

1

First, I used the most upvoted answer in this post to inspect the ReactSelect menu (which I wasn't able to do previously). I discovered that menuList has a default maxHeight of 300px, which was preventing the menu from growing larger.

This then did the trick for me:

menuList: (provided) => ({
    ...provided,
    maxHeight: null
}),
Canovice
  • 9,012
  • 22
  • 93
  • 211