CODEWITHSUNDEEP
reactjstailwind-cssheadless-ui
Sakhawat Hossain Sohel
Sakhawat Hossain Sohel

Reputation: 335

react headlessui dropdown overflow problem

When I am using the @headlessui/react dropdown component: I have been facing problems when the Menu is open in Tailwind CSS and Next.js project.

    "use client";

import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
import { FaChevronDown } from "react-icons/fa6";

export default function Dropdown() {
  return (
    <div className=" overflow-hidden text-right">
      <Menu>
        <MenuButton className="text-viking-text inline-flex items-center gap-2 rounded-md bg-transparent py-1.5 px-3 text-sm/6 font-semibold focus:outline-none data-[hover]:bg-viking-950 data-[open]:bg-viking-900 data-[focus]:outline-1 data-[focus]:outline-viking-900">
          Options
          <FaChevronDown className="size-2 fill-viking-text" />
        </MenuButton>

        <MenuItems
          transition
          anchor="bottom end"
          className="w-52  rounded border border-viking-900 bg-white/5 p-1 text-sm/6 text-viking-300 transition duration-100 ease-out [--anchor-gap:var(--spacing-1)] focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0"
        >
          <MenuItem>
            <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
              Edit
              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">
                ⌘E
              </kbd>
            </button>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  );
}

enter image description here

Upvotes: 1

Views: 194

Answers (1)

Pouriya Sedaghat
Pouriya Sedaghat

Reputation: 41

Add To Base Layer in Your Css File :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    overflow: auto !important;
    padding: 0 !important;
  }
}

Upvotes: 1

Related Questions