'How to properly overflow a dropdown in tailwind?

I am trying to make the dropdown on the right overflow so that it is completely visible. I do not want to make the table bigger, I want the dropdown to be bigger than the table. I tried multiple different things with overflow and absolute/relative positioning but failed. What classes do I need to change to make it work? I appreciate any inputs!

Tailwind playground for testing: https://play.tailwindcss.com/0iiSxy59aP

Cheers

htmlcsstailwind-css


Solution 1:[1]

Removing overflow-x-auto in line 3 and overflow-hidden in line 5 fixed it!

Solution 2:[2]

The accepted answer solves the problem. But there are cases when we actually need an overflow.

In such a scenario, we need to remove the current relative-absolute approach and can make use of this library

Setup useFloating Hook

import { useFloating, shift } from "@floating-ui/react-dom";
   
const { x, y, reference, floating, strategy } = useFloating({
    placement: "bottom-start",
    middleware: [shift()],
  });

add reference ref in the button which triggers dropdown

<button ref={reference} type="button""> Options </button>

add floating ref in the div which was previously made absolute

 <div ref={floating}
          style={{
            position: strategy,
            top: y ?? "",
            left: x ?? "",
          }}> </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jonas Scholz
Solution 2 Dipesh KC

Related Questions