0

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?

Valentin Vignal
  • 6,151
  • 2
  • 33
  • 73
  • Please generalize instead of asking such extremely similar questions. Both are just "elements end up on top of drawer". – H.B. Jun 30 '23 at 17:00
  • Now that I see the answers I see that the issues/solutions are similar. However, I don't agree and I don't think they should be marked and considered as duplicates. [The other question](https://stackoverflow.com/questions/76590507/how-to-remove-steps-from-being-over-the-drawer)'s issue was about elements that appeared on top of the drawer (design) but there is no interactivity issue. Here, the issue is with the interactivity (the design looks good as everything stays behind the drawer. So to an untrained eye, I thought those were 2 independent problems and deserved 2 different questions. – Valentin Vignal Jul 01 '23 at 05:49
  • I think what matters more is if one of those answers works for you. – Rohit Gupta Jul 15 '23 at 04:42

1 Answers1

1

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>
Wongjn
  • 8,544
  • 2
  • 8
  • 24