-1

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 -

enter image description here

Problematic display -

enter image description here

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

Siddharta Maity
  • 9
  • 3

2 Answers2

0

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.

Wongjn
  • 8,544
  • 2
  • 8
  • 24
  • Thanks @Wongjn for your help, I will try this solution. But for now I was able to solve th eissue by changing Menu position from absolute to fixed. – Siddharta Maity May 21 '23 at 10:37
0

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

Mechanic
  • 5,015
  • 4
  • 15
  • 38