bug: Floating Label overlays the drawer component

[kensodemann]

Reproduction URL (Required)

https://github.com/kensodemann/show-floating-labels

What version of daisyUI are you using?

5.0.43

Which browsers are you seeing the problem on?

All browsers

Describe your issue

I have an application that has some forms using floating labels. I also have a drawer menu to the left. On smaller form factors, this drawer is opened via a hamburger menu. If this takes place while there is data in the inputs, and thus the labels are floating, they float above the drawer.

I have reproduced this in a simple app. To replicate, run the (see instructions in README.md file), fill in some of the inputs so at least one of the labels floats, then open the drawer using the hamburger menu. You should see the floating labels float above the menu.

Inputs with the labels floating:

Labels floating over the drawer:

I noticed the floating labels use a z-index of 2, and removing that solves this issue, but I have no idea if it causes other issues.

.floating-label {
    &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) {
        > span {
            opacity: 100%;
            top: 0;
            translate: -12.5% calc(-50% - 0.125em);
            scale: 0.75;
            pointer-events: auto;
            z-index: 2;
        }
    }
}

[github-actions[bot]]

Thank you @kensodemann for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[sulimanbenhalim]

@saadeghi assign this to me

[sulimanbenhalim]

if removing the z-index:2 this is what it causes:

so I increased the z-index of the drawer

[cabrace]

Problem: class="border-collapse table table-pin-rows" causes pinned heading bleedthrough with drawer.

DaisyUI Version: "daisyui": "^5.0.43", Browser > Chrome: Version 131.0.6778.108 (Official Build) (64-bit)

It could just very well be my browser version, which I DO need to update. But just posting as I do notice this.

.table {
    :where(.table-pin-rows thead tr) {
        position: sticky;
        top: calc(0.25rem* 0);
        z-index: 1; /** Changing z-index here to zero fixes issue **/
        background-color: var(--color-base-100);
    }
}

[yoshi6jp]

This issue is caused by the Drawer component documentation.

Currently, some code examples and the preview in the documentation include the .z-99 class on the drawer-side, but other sample codes are missing .z-99. As a result, if users copy and paste the sample code, the Drawer sidebar may be hidden behind other elements.

In fact, as shown in the playground examples below, the Drawer does not display correctly without .z-99, but works as expected when .z-99 is added:

tailwindPLAY

• Without .z-99

• With .z-99:

To avoid confusion, I think it would be better to add .z-99 to all sample codes in the documentation so that they behave the same as the preview.

I am planning to create a PR to fix the documentation.