Drawer height (follow-up from comments on code change)

[pdanpdan]

261b302#r169432040

I checked, we only need @apply h-auto overflow-y-auto; at

daisyui/packages/daisyui/src/components/drawer.css

Line 140 in a4492a9

@apply overflow-y-auto;

so it is simple to adjust it any other way.

This is solved, one can use <variant>:h-auto or whatever, using the same variant as the one used for <variant>:drawer-open.

Currently, if someone wants a navbar (or a footer) outside of drawer, height would be: drawer (100vh) + navbar (or footer).
Unless they use calc() for drawer height.
I don't have solution for it in mind tho. Maybe something with if()… can help

You mean like this? It will adjust dinamically to header/footer size (with .

Layout with header/footer

<!-- Simulate the body -->
<div class="h-screen grid grid-rows-[auto_1fr_auto]">

<header class="row-1 navbar bg-base-300 shadow-sm">
  <div class="flex-none">
    <label class="btn btn-square btn-ghost drawer-button" for="drawer">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg>
    </label>
  </div>
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>

  <div class="flex-1 flex flex-wrap gap-4">
    <button class="btn btn-xs btn-primary" onclick="modal_1.showModal()">
      Modal
    </button>

    <button class="btn btn-xs btn-primary" onclick="modal_2.showModal()">
      Btn Modal
    </button>

    <label class="btn btn-xs btn-secondary drawer-button" for="drawer">
      Drawer
    </label>

    <label class="btn btn-xs btn-neutral" for="show-scroll">
      Scrollbar
    </label>
  </div>
</header>

<dialog id="modal_1" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="modal-action">
      <label class="btn btn-neutral" for="show-scroll">
        Toggle page scrollbar
      </label>
      <label class="btn btn-neutral" for="hide-scroll-modal1">
        Toggle modal scrollbar
      </label>
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <button class="btn">Close</button>
      </form>
    </div>

    <input type="checkbox" class="peer hidden" id="hide-scroll-modal1" checked />
    <div class="peer-checked:hidden">
      <p class="py-4">Line 1</p>
      <p class="py-4">Line 2</p>
      <p class="py-4">Line 3</p>
      <p class="py-4">Line 4</p>
      <p class="py-4">Line 5</p>
      <p class="py-4">Line 6</p>
      <p class="py-4">Line 7</p>
      <p class="py-4">Line 8</p>
      <p class="py-4">Line 9</p>
      <p class="py-4">Line 10</p>
      <p class="py-4">Line 11</p>
      <p class="py-4">Line 12</p>
      <p class="py-4">Line 13</p>
      <p class="py-4">Line 14</p>
      <p class="py-4">Line 15</p>
      <p class="py-4">Line 16</p>
      <p class="py-4">Line 17</p>
      <p class="py-4">Line 18</p>
      <p class="py-4">Line 19</p>
      <p class="py-4">Line 20</p>
    </div>
  </div>
</dialog>

<dialog id="modal_2" class="modal modal-bottom">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="modal-action">
      <label class="btn btn-neutral" for="show-scroll">
        Toggle page scrollbar
      </label>
      <label class="btn btn-neutral" for="hide-scroll-modal2">
        Toggle modal scrollbar
      </label>
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <button class="btn">Close</button>
      </form>
    </div>

    <input type="checkbox" class="peer hidden" id="hide-scroll-modal2" checked />
    <div class="peer-checked:hidden">
      <p class="py-4">Line 1</p>
      <p class="py-4">Line 2</p>
      <p class="py-4">Line 3</p>
      <p class="py-4">Line 4</p>
      <p class="py-4">Line 5</p>
      <p class="py-4">Line 6</p>
      <p class="py-4">Line 7</p>
      <p class="py-4">Line 8</p>
      <p class="py-4">Line 9</p>
      <p class="py-4">Line 10</p>
      <p class="py-4">Line 11</p>
      <p class="py-4">Line 12</p>
      <p class="py-4">Line 13</p>
      <p class="py-4">Line 14</p>
      <p class="py-4">Line 15</p>
      <p class="py-4">Line 16</p>
      <p class="py-4">Line 17</p>
      <p class="py-4">Line 18</p>
      <p class="py-4">Line 19</p>
      <p class="py-4">Line 20</p>
    </div>
  </div>
</dialog>

<div class="row-2 grid-rows-subgrid drawer xl:drawer-open">
  <input id="drawer" type="checkbox" class="drawer-toggle" />
  <div class="row-2 overflow-auto drawer-content">
    <div class="p-4">
      <div class="navbar bg-base-300 gap-4 flex-wrap">
        <button class="btn btn-primary" onclick="modal_1.showModal()">
          Open Modal
        </button>

        <button class="btn btn-primary" onclick="modal_2.showModal()">
          Open Bottom Modal
        </button>

        <label class="btn btn-secondary drawer-button" for="drawer">
          Open drawer
        </label>

        <label class="btn btn-neutral" for="show-scroll">
          Toggle scrollbar
        </label>
      </div>

      <input type="checkbox" class="peer hidden" id="show-scroll" checked />
      <div class="h-[20vh] peer-checked:h-[120vh] mt-2 bg-base-200 p-4">
        Page content here
      </div>
    </div>
  </div>

  <div class="row-2 drawer-side">
    <label for="drawer" aria-label="close sidebar" class="drawer-overlay"></label>

    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <li>
        <label class="btn btn-neutral" for="show-scroll">
          Toggle page scrollbar
        </label>
      </li>
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
      <li>
        <label class="btn btn-neutral" for="hide-scroll-drawer">
          Toggle drawer scrollbar
        </label>
      </li>
      <input type="checkbox" class="peer hidden" id="hide-scroll-drawer" checked />
      <div class="peer-checked:hidden">
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
      </div>
    </ul>
  </div>
</div>

<footer class="row-3 navbar bg-base-300 shadow-sm">
  <div class="flex-none">
    <label class="btn btn-square btn-ghost drawer-button" for="drawer">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg>
    </label>
  </div>
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
</footer>

</div>

Or do you mean the overlay drawer to not cover a header? That would be a little more difficult.