CODEWITHSUNDEEP
javascriptreactjstailwind-cssheadless-ui
Hemant Sharma
Hemant Sharma

Reputation: 79

Headless UI & React Dropdown menu changing position when clicked

I want to create a dropdown menu, for which I'm using HeadlessUI on React with Tailwind.

The menu is working fine, except that when clicked on, the position of the menu changes, as in instead of dropping down perfectly from the menu button it overlays it (I don't know how to describe it exactly).

Here's a before and after, hope you can make out what I'm trying to say:

Before button is clicked After the button is clicked

The code for the dropdown menu:

function HomeMenu(props) {
return (
<Menu>
  <Menu.Button>{props.name}</Menu.Button>
  
  <Transition
    enter="transition duration-100 ease-out"
    enterFrom="transform scale-95 opacity-0"
    enterTo="transform scale-100 opacity-100"
    leave="transition duration-75 ease-out"
    leaveFrom="transform scale-100 opacity-100"
    leaveTo="transform scale-95 opacity-0"
  ></Transition>


  <Menu.Items>
    <Menu.Item>
      {({ active }) => (
        <a href="/account-settings">
          Account settings
        </a>
      )}
    </Menu.Item>
    <Menu.Item>
      {({ active }) => (
        <a href="/account-settings">
          Logout
        </a>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>
  )
  }

The div in which the menu is used:

<div className="flex items-center justify-center p-6">
      <h1 className="text-6xl px-3 rounded-md shadow-lg py-1 bg-lmgray">
          NEW STREET JOURNAL
      </h1>
      <div className="absolute right-20 mt-2 px-5 rounded-md border-2 border-gray shadow-lg py-1 bg-lmgray" >
        <HomeMenu name={props.name}/>
      </div>

    </div>

Upvotes: 2

Views: 3741

Answers (1)

Kelvin Henry
Kelvin Henry

Reputation: 13

<div className="absolute right-20 mt-2 px-5 rounded-md border-2 border-gray shadow-lg py-1 bg-lmgray" >
        <HomeMenu name={props.name}/>
      </div>

try to remove the classname absolute and try again

Upvotes: 0

Related Questions