CODEWITHSUNDEEP
reactjstailwind-css
Zokulko
Zokulko

Reputation: 229

My dropdowns are displayed above my popup instead on the background

when I'm on the next page of my form and I click on the cross on the top left,a popup appears. But why do my dropdowns are displayed above my pop-up (see the picture please)

export default function Details() { 
  ...
  return (
    <>
      <form onSubmit={handleSubmit}>
        <Comments />
        <input
          type="text"
          value={menu}
          placeholder="Menu"
          onChange={(e) => setMenu(e.target.value)}
        />
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <Dropdown options={LOCATION} isMulti={false} />
        </div>
        //other inputs   
    </>
  );
}

export default function Comments() {
  const TYPE = [
    { label: "veggie", value: "veggie" },
    ...
  ];
  return (
    <>
      <div className="grid grid-cols-2 ">
        <div className="text-md font-bold rounded-md mx-2 leading-6 text-gray-500  gap-x-2 gap-y-4">
          Type: <Dropdown options={TYPE} isMulti={true} />
        </div>    
    </>
  );
}

Here is my code

Here the picture :

enter image description here

Upvotes: 0

Views: 436

Answers (1)

MagnusEffect
MagnusEffect

Reputation: 3905

Keep the z-index of the popup to 10 (push forward). You can do this by adding z-10 to the div of the popup.

If it not works then you can alternatively keep the z-index of dropdown to -10(push backward ). For this you have to add -z-10 to dropdown.

Any of the above two solutions will work.

Upvotes: 1

Related Questions