DaisyUI dropdown button inside collapse is hidden inside container

Question

Hello i have a small issue with daisyUI first time trying it. Here's my template code and example picture. Basically the issue i'm facing is that the dropdown menu inside the collapse element is not shown because it's hidden by the content of the collapse. How can i fix this? I tried using z-index to 99 but that didnt seem to work. And adding ! to the dropdown makes it expand the content of the collapse but i need go over the end of the collapse element.

  <div
    tabindex="0"
    class="collapse collapse-open border border-base-300 bg-red-200"
  >
    <div class="collapse-title text-xl font-medium">
      I have collapse-open class
    </div>
    <div class="collapse-content">
      <details class="dropdown">
        <summary class="m-1 btn">open or close</summary>
        <ul
          class="p-2 shadow menu dropdown-content z-[99] bg-base-100 rounded-box w-52"
        >
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
        </ul>
      </details>
    </div>
  </div>

Test image

I tried adding the important tag on the dropdown-content and dropdown menu class but that just expands the container which is not what i want to achieve. I also tried to tinker with the overflow attribute but that didnt seem to work

Answer 1

You'd need to override the overflow: hidden declaration from the .collapse rule from Daisy UI to overflow: visible.

For example, with overflow: visible !important via the !overflow-visible class:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com/3.4.0"></script>

<div tabindex="0" class="collapse collapse-open border border-base-300 bg-red-200 !overflow-visible">
  <div class="collapse-title text-xl font-medium">
    I have collapse-open class
  </div>
  <div class="collapse-content">
    <details class="dropdown">
      <summary class="m-1 btn">open or close</summary>
      <ul class="p-2 shadow menu dropdown-content z-[99] bg-base-100 rounded-box w-52">
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
      </ul>
    </details>
  </div>
</div>