Question 197694 in CSS Question posted in
Some basic documentation can be found here.

Css – How to remove steps from being over the drawer

I’m using DaisyUI and TailwindCSS

I’m using a drawer and steps.

<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>
        <ul class="steps">
            <li class="step step-primary">Register</li>
            <li class="step step-primary">Choose plan</li>
            <li class="step">Purchase</li>
            <li class="step">Receive Product</li>
        </ul>
    </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 steps component from DaisyUI.

enter image description here

When I click on "OPEN DRAWER" to open the drawer, the circle of the steps remains above it:

enter image description here

How to make the drawer be over the step circles?

Tags:

2

Answers


  1. 0

    Consider increasing the z-stack position of the .drawer-side element by applying z-index: 10 to it via the z-10 utility class:

    <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>
    <ul class="steps">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Choose plan</li>
      <li class="step">Purchase</li>
      <li class="step">Receive Product</li>
    </ul>
  </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>
    Login or Signup to reply.
  2. 0

    The steps mess with the z-index, which causes issues with the drawer which also relies on this mechanism to draw on top. Would recommend to use isolation on the steps to restrict the z-index ordering to within that container. (This probably should be part of the steps class itself, anyway.)

    That way you do not need to know which particular indices are being used.

    <ul class="steps isolate">

    <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>
    <ul class="steps isolate">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Choose plan</li>
      <li class="step">Purchase</li>
      <li class="step">Receive Product</li>
    </ul>
  </div>
  <div class="drawer-side">
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search