Search code examples
csstailwind-csssveltesveltekitdaisyui

A collapse behind the drawer prevents me from interacting with the drawer

I'm using DaisyUI and TailwindCSS

I'm using a drawer and collapse.

<div class="drawer">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
        <!-- Page content here -->
        <label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
        <div class="collapse bg-base-200">
            <input type="checkbox" />
            <div class="collapse-title text-xl font-medium">Click me to show/hide content</div>
            <div class="collapse-content">
                <p>hello</p>
            </div>
        </div>
    </div>
    <div class="drawer-side">
        <label for="my-drawer" class="drawer-overlay" />
        <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content">
            <!-- Sidebar content here -->
            <li><a>Sidebar Item 1</a></li>
            <li><a>Sidebar Item 2</a></li>
        </ul>
    </div>
</div>

The code is the copy/paste from the first example of the drawer and collapse with checkbox component from DaisyUI.

When I open the drawer, I cannot interact with the items that are over the clickable area of the collapse:

In this case I can interact (by hovering and clicking) with "Sidebar item 1":

But I cannot interact (by hovering and clicking) with "Sidebar item 2" (I'm hovering the item on the next picture):

How can I fix it?

Solution

  • Consider increasing the z-stack position of the .drawer-side element by applying z-index: 10 to it via the z-10 utility class. This ensures the drawer content is over the drawn over the top of the main content, allowing you to be able to interact with the drawer.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/3.1.7/full.min.css" integrity="sha512-XCyMGudVghtcrEkHUSNd/OvlbxUYXLeI0bYO4jm3Tn1olsupuMnMmRRecHPy0kY/AJI2gc6mTzzCPY5DCsPRCg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="drawer">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <!-- Page content here -->
    <label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
    <div class="collapse bg-base-200">
      <input type="checkbox" />
      <div class="collapse-title text-xl font-medium">Click me to show/hide content</div>
      <div class="collapse-content">
        <p>hello</p>
      </div>
    </div>
  </div>
  <div class="drawer-side z-10">
    <label for="my-drawer" class="drawer-overlay"></label>
    <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>