I use Next.js and tailwind css, i loop through an Aarry of Elemnts, I have this problem
when i click "More" button i want the dropdown to appear, i use absolute positionning for the dropdown, i encounter this issue, i tried z-index but didn't work :
here is my jsx :
export const PartnersData = ({
moneyInfo,
locale,
promotion,
translations,
toReceive,
average,
}: IPartnersDataProps) => {
const [modalKey, setModalKey] = useState<string>("");
// console.log(moneyInfo?.opts);
return (
<>
{moneyInfo?.opts.map((opt: IOpts, index) => (
<div key={opt.provider} className="drop-shadow-lg ">
<div
className={classNames(
opt?.promotedNote && "pb-24 md:pb-12",
"mt-5 grid-cols-2 !px-7 md:px-0 border-2 border-purple-300 rounded-lg bg-white shadow divide-gray-200 md:grid-cols-8 md:divide-y-0 "
)}>
<div className="flex z[-1] flex-col md:flex-row items-center divide-y-2 md:divide-x-2 md:divide-y-0 divide-purple-300">
<div
className={`flex-1 px-6 pb-4 md:pb-0`}>
<div className="px-4 py-5 grid grid-cols-2 md:grid-cols-4 ">
<dt className="text-base font-normal text-gray-500">
<p>{opt.provider}</p>
</dt>
{/* ------------ Fee --------- */}
<div className="px-4 py-5 ">
<h3 className="text-md font-medium text-gray-500 ">
{locale === "fr"
? translations?.table.fee.fr
: translations?.table.fee.en}
</h3>
<dd className="mt-1 flex place-content-start md:block lg:flex">
<p className="ml-0 flex items-baseline text-sm font-semibold">
{promotion
? opt.promotedFee.toFixed(2)
: opt.fee.toFixed(2)}{" "}
{moneyInfo.currencyFrom}
</p>
</dd>
</div>
{/* ----------- Transfer time --------- */}
<div className="px-4 py-5 ">
<h3 className="text-md font-medium text-gray-500">
{locale === "fr"
? translations?.table.speed.fr
: translations?.table.speed.en}
</h3>
<dd className="mt-1 flex md:block lg:flex text-sm font-semibold text-black">
{!opt.speed && (
<p className="text-sm text-black">Non renseigner</p>
)}
{locale === "fr"
? opt?.speed?.values.fr
: opt?.speed?.values.en}
</dd>
</div>
</div>
{/* --- */}
<div className="flex items-end justify-between gap-6 ">
<p className="text-sm text-gray-500">
Lorem Ipsum is simply dummy text of the printing and
typesetting
</p>
// My Drop Down start --------------
<div className="relative z-50">
// More Button
<button className="flex items-center gap-1">
<span className="text-sm text-gray-500 font-medium">
More
</span>{" "}
<ChevronDownIcon className="h-4 " />
</button>
<div className="fixed border ">
{/* ------------ Max to send --------- */}
<div className="px-4 py-5 text-center ">
<h3 className="text-md font-medium text-gray-500 ">
{locale === "fr"
? translations?.table.limit.fr
: translations?.table.limit.en}
</h3>
<dd className="mt-1 font-semibold flex justify-center md:block lg:flex text-sm text-black">
{opt.maxToSend} {moneyInfo.currencyFrom}
</dd>
</div>
{/* ----------- Reception --------- */}
<div className="px-4 py-5 text-center ">
<h3 className="text-md font-medium text-gray-500">
{locale === "fr"
? translations?.table.reception.fr
: translations?.table.reception.en}
</h3>
<dd className="mt-1 flex justify-center md:block lg:flex items-center text-sm text-black font-semibold">
<p
className="text-sm cursor-pointer"
onClick={() => setModalKey(opt.provider)}>
{opt.partners[0]}{" "}
<span className="text-xs cursor-pointer font-bold text-gray-500 items-center relative">
<ChevronDownIcon className="h-3 -right-3 top-[20%] absolute" />
</span>
</p>
<Modal
open={modalKey === opt.provider}
setOpen={setModalKey}
partners={opt.partners}
/>
</dd>
</div>
</div>
</div>
// Dopdown end ---------------
</div>
</div>
<div className="px-6">
{/* ----------- They get --------- */}
<div className="px-4 py-5 ">
<h3 className="text-md font-medium text-gray-500">
{toReceive === "send" ? (
<>
{locale === "fr"
? translations?.table.they_get.fr
: translations?.table.they_get.en}
</>
) : (
<>
{locale === "fr"
? translations?.table.to_send.fr
: translations?.table.to_send.en}
</>
)}
</h3>
<dd className="mt-1 flex-col flex justify-center font-semibold md:block lg:flex text-sm text-black">
<p className="text-3xl">
<span>
{promotion
? Math.round(opt.promotedAmountReceive)
: opt.amountReceive}
</span>{" "}
<span>
{toReceive === "send"
? moneyInfo.currencyTo
: moneyInfo.currencyFrom}
</span>
</p>
</dd>
</div>
<div className="px-4 py-4 text-center place-content-center">
<Link href={opt.url} passHref>
<button
type="button"
className="inline-flex items-center px-6 py-3 text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{
translations?.table.providers_check_button[
locale as locale
]
}
</button>
</Link>
</div>
</div>
</div>
</div>
{opt?.promotedNote && (
<div className="absolute bottom-0 inset-x-0 rounded-b-lg bg-indigo-500 px-4 py-6 sm:px-10">
<div className="text-sm font-medium text-white text-left">
<span>PROMOTION</span>
<span className="pl-5">
{locale === "fr"
? opt?.promotedNote.fr
: opt?.promotedNote.en}
</span>
</div>
</div>
)}
</div>
))}
</>
);
};can anyone tell how to solve this, thanks in advance