Headless UI Tailwind Menu display issue

Question

I am using Tailwind with Headless UI for my react project. I am having a display issue for Headless UI Menu as shown i the below images -

Correct display -

Problematic display -

The menu is open but not displayed outside of the parent. please help me how to resolve this issue.

Answer 1

We ended up using from https://headlessui-float.vercel.app/ and wrapped around the MenuButton and Items, this will solve the overflow issue. However, we haven't solved the scroll into screen issue as it hasn't been a requirement for us

Answer 2

Add an overflow: visible to the parent (seems to be a <table> element in your case) and that popup will work as expected

Answer 3

It seems like the menu is being displayed inside an element with overflow: hidden applied. Consider removing the overflow: hidden from the parent element, or move the menu outside the overflow: hidden element by using a portal.