bug: Modal z-index issue.

[Rowen-S]

What version of daisyUI are you using?

"daisyui": "^4.6.1"

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

NAN

Describe your issue

my bug:

The z-index of the daisyUI modal is overshadowing the content that was originally intended to be displayed.

"Connecting" should be below "walletConnect".

my modal code:

...
return (
    <dialog
      id={modalId}
      ref={modalRef}
      className={`lower-z-index modal modal-bottom max-h-[${maxHeight}vh] min-h-[${minHeight}vh] ${scrollOverlay ? 'overflow-scroll' : ''} sm:modal-middle `}
    >
      <div className="lower-z-index modal-box p-0">{children}</div>
      {modalId && (
        <label className="modal-backdrop" htmlFor={modalId} onClick={onDismiss}>
          Close
        </label>
      )}
    </dialog>
  )

 .lower-z-index {
    z-index: 10 !important; 
  }

Why doesn't the z-index setting of the modal take effect? Could it be related to the outer #top-layer in the HTML?

[github-actions[bot]]

Thank you @Rowen-S 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.

[Rowen-S]

{ * html * }
<div id="walletconnect-wrapper">
  <div id="walletconnect-qrcode-modal" class="walletconnect-qrcode__base animated fadeIn">
    <div class="walletconnect-modal__base">
      <div class="walletconnect-modal__header">
        ...
      </div>
      <div>
        <div>
          <p id="walletconnect-qrcode-text" class="walletconnect-qrcode__text">使用兼容 WalletConnect 的钱包扫描二维码</p>
          <div>
            ...
          </div>
          <div class="walletconnect-modal__footer"><a>复制到剪贴板</a></div>
          <div class="walletconnect-qrcode__notification"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{ * css * }
#walletconnect-wrapper {
    -webkit-user-select: none;
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    user-select: none;
    width: 100%;
    z-index: 99999999999999;
}

[Rowen-S]

Method 2: using a hidden checkbox legacy works perfectly without any issues. Could this be because the Dialog modal is bound to the topmost layer, #top-layer?

[Rowen-S]

This could be an optimization, considering that Method 2 is a legacy method and might be deprecated soon.

[saadeghi]

I still can't reproduce the issue.

{ * html * }
<div id="walletconnect-wrapper">
  <div id="walletconnect-qrcode-modal" class="walletconnect-qrcode__base animated fadeIn">
    <div class="walletconnect-modal__base">
      <div class="walletconnect-modal__header">
        ...
      </div>
      <div>
        <div>
          <p id="walletconnect-qrcode-text" class="walletconnect-qrcode__text">使用兼容 WalletConnect 的钱包扫描二维码</p>
          <div>
            ...
          </div>
          <div class="walletconnect-modal__footer"><a>复制到剪贴板</a></div>
          <div class="walletconnect-qrcode__notification"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{ * css * }
#walletconnect-wrapper {
    -webkit-user-select: none;
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    user-select: none;
    width: 100%;
    z-index: 99999999999999;
}

This is not daisyUI. And you have a questionable z-index value on the last line.

Can you give me a reproduction link where I can open and see the issue?

You can use Tailwind Play https://daisyui.com/tailwindplay/

[Rowen-S]

I still can't reproduce the issue.

{ * html * }
<div id="walletconnect-wrapper">
  <div id="walletconnect-qrcode-modal" class="walletconnect-qrcode__base animated fadeIn">
    <div class="walletconnect-modal__base">
      <div class="walletconnect-modal__header">
        ...
      </div>
      <div>
        <div>
          <p id="walletconnect-qrcode-text" class="walletconnect-qrcode__text">使用兼容 WalletConnect 的钱包扫描二维码</p>
          <div>
            ...
          </div>
          <div class="walletconnect-modal__footer"><a>复制到剪贴板</a></div>
          <div class="walletconnect-qrcode__notification"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{ * css * }
#walletconnect-wrapper {
    -webkit-user-select: none;
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    user-select: none;
    width: 100%;
    z-index: 99999999999999;
}

This is not daisyUI. And you have a questionable z-index value on the last line.

Can you give me a reproduction link where I can open and see the issue?

You can use Tailwind Play https://daisyui.com/tailwindplay/

this stackblitz link https://stackblitz.com/edit/stackblitz-starters-u3or7h?file=app%2Fpage.tsx

[rajeshwarpatlolla]

I encounter a similar problem where, regardless of the z-index assigned, the modal consistently remains above all other elements. My intention is to have the modal positioned behind another element, but unfortunately, this is not achieving the desired result. I am trying in vue.js.

[Rowen-S]

I encounter a similar problem where, regardless of the z-index assigned, the modal consistently remains above all other elements. My intention is to have the modal positioned behind another element, but unfortunately, this is not achieving the desired result. I am trying in vue.js.

checkbox modal might fit your needs.

[rajeshwarpatlolla]

What do you mean by checkbox modal @Rowen-S ?

[Ritcheyy]

I have this bug as well, I want to place a message toast component above a modal, it doesn't seem possible irrespective of the z-index

[saadeghi]

This is not about daisyUI.
The new HTML <dialog> element is "top layer" which means it stays on top of everything else so you can't show elements outside of dialog on top of the dialog by increasing the z-index.

[Blankeos]

Good info on the <dialog> element. What's the workaround?

[saadeghi]

@Blankeos You can put elements inside <dialog> but outside modal-box class. It will be visible when dialog is open.

[Blankeos]

@saadeghi I see. I'm not sure if that's possible for this usecase: Rendering the toast component (https://sonner.emilkowal.ski) that exists outside the modal. The <Toaster /> component exists in the root of the tree. It's kind of supposed to be global. Should I be putting that inside the <dialog> now?

EDIT: I found a workaround btw. It seems to work when I only use the "modal-open" class instead of the .showModal() and .close(). functions.

Basically if the modal was opened with .showModal() it will use the top-level layer or something so z-indexes wouldn't work?

But if It had the class "modal-open" instead, it would actually work.

[krongk]

The seem issue when I submit a feedback.

[ivanamato]

@saadeghi I see. I'm not sure if that's possible for this usecase: Rendering the toast component (https://sonner.emilkowal.ski) that exists outside the modal. The <Toaster /> component exists in the root of the tree. It's kind of supposed to be global. Should I be putting that inside the <dialog> now?

EDIT: I found a workaround btw. It seems to work when I only use the "modal-open" class instead of the .showModal() and .close(). functions.

Basically if the modal was opened with .showModal() it will use the top-level layer or something so z-indexes wouldn't work?

But if It had the class "modal-open" instead, it would actually work.

Excellent! worked for me! thanks!