bug: Dropdown overlapped by table header

[gitmalong]

What version of daisyUI are you using?

4.12.10

Which browsers are you seeing the problem on?

No response

Reproduction URL

-

Describe your issue

 <table class="table table-xs table-zebra table-pin-cols table-pin-rows mt-2">
<thead>
    <tr>
        <th>"Date"</th>
        <th>
            <div class="dropdown dropdown-bottom">

                Col 1

                <ul
                      tabindex="0"
                      class="dropdown-content menu p-0 z-10 shadow bg-base-100 rounded-box w-52"
                  >
                      <li>
                          <a>
                              <label class="label cursor-pointer">
                                      Some dropdown content
                              </label>
                             </a>
                        </li>
                   </ul>

            </div>
        </th>
    </tr>
</thead>
</table>

Example:

[github-actions[bot]]

Thank you @gitmalong for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[twschum]

I have also reproduced this problem, where table headings are on top of a nav dropdown. The navbar and dropdown are outside the table element.

[KozSuper]

The dropdown is being covered by the table. i tried z-index but not working

[saadeghi]

@KozSuper My friends, thanks for the issue and follow up comments.
We need a reproduction link to see the problem in action. I don't see the issue in the original provided code, and screenshot is not helpful since there's no way for me to guess what's the code you used for it.

Here's a working example: https://play.tailwindcss.com/q4zUojS1Qu

I'll close this for now, but feel free to reopen once you can provide a reproduction link. Thanks!

[KozSuper]

when a dropdown is inside a div with transform, it will behave like this.

https://play.tailwindcss.com/NJPASKLtKE

[leouie28]

I have this error when i add dropdown inside a table.

https://play.tailwindcss.com/jaw5gLJBnA

[saadeghi]

@leouie28 overflow-x-auto class is causing that.
This will be fixed in the upcoming daisyUI 5 release by using the new HTML popover API for dropdowns.