How to fix styling on react-select dropdown when using menuPortalTarget

Question

When I use menuPortalTarget it breaks the styling on my dropdown. Here is a codesandbox showing the problem. In the codesandbox I have a button to toggle menuPortalTarget. When menuPortalTarget is active and you open the dropdown you can see the messed up styling vs when its not active.

I tried playing around with the parent styling and the menuPortal styling but I couldn't get it working.

This example is based off this from the react-select docs.

Facing similar issue too. This worked for me enter link description here. — Shrey Marwaha
– Shrey Marwaha, Commented Sep 23, 2022 at 22:22

Erfan HosseinPoor · Accepted Answer · 2021-06-13 05:30:49Z

2

You can try this

const selectStyles = {
  control: (provided) => ({ ...provided, minWidth: 240, margin: 8 }),
  menu: () => ({ boxShadow: "inset 0 1px 0 rgba(0, 0, 0, 0.1)" }),
  menuPortal: () => ({ zIndex: "1000", width: "240px", position: "absolute", top: "214px", backgroundColor: "white", left: "17px", boxShadow: "inset 0 1px 0 rgba(0, 0, 0, 0.1)" })
};

answered Jun 13, 2021 at 5:30

Erfan HosseinPoor

1,0877 silver badges10 bronze badges

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

Comments

Guilherme Rodriguero · Accepted Answer · 2023-11-16 21:13:59Z

1

What worked for me:

<Select menuPosition="fixed" />

edited Nov 16, 2023 at 21:13

answered Nov 16, 2023 at 21:13

Guilherme Rodriguero

351 silver badge7 bronze badges

1 Comment

Anup Dhal Over a year ago

1. Install packagenpm i --save react-select 2. Import in the respective file import Select from 'react-select' 3. Include below code snippet const options = [ { value: 'apple', label: 'Apple' }, { value: 'orange', label: 'Orange' }, { value: 'banana', label: 'Banana' } ] const MyComponent = () => ( <Select options={options} /> )

Collectives™ on Stack Overflow

How to fix styling on react-select dropdown when using menuPortalTarget

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related