Style ReactSelect menu to display all options with no vertical scroll

Question

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 · Accepted Answer · 2020-08-31 19:35:50Z

2

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
}),

edited Aug 31, 2020 at 19:35

answered Aug 31, 2020 at 19:27

Canovice

10.7k34 gold badges134 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Style ReactSelect menu to display all options with no vertical scroll

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related