CODEWITHSUNDEEP
javascriptreactjsreact-select
Antespo
Antespo

Reputation: 149

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

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.

Upvotes: 2

Views: 8290

Answers (2)

Guilherme Rodriguero
Guilherme Rodriguero

Reputation: 35

What worked for me:

<Select menuPosition="fixed" />

Upvotes: 1

Erfan HosseinPoor
Erfan HosseinPoor

Reputation: 1077

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)" })
};

Upvotes: 2

Related Questions