sdk icon indicating copy to clipboard operation
sdk copied to clipboard

[UI]: Modal is showing up behind other modal

Open XantreDev opened this issue 1 year ago • 9 comments

Describe the bug

Show <dialog> modal to user with button to connect wallet After click to button modal will be shown behind of <dialog> modal image

Expected behavior

I expected it to be shown over <dialog> modal

Current behavior

Tonconnect modal behind of dialog modal

Steps to Reproduce

https://stackblitz.com/edit/stackblitz-starters-npvfnq?file=index.html

  1. Open preview in separate tab (CORS)
  2. Click to Open dialog
  3. Click to Open tonconnect

Environment

  • https://unpkg.com/@tonconnect/[email protected]/dist/tonconnect-ui.min.js
  • Windows
  • Edge, Firefox: any

Additional context

No response

XantreDev avatar Jun 12 '24 10:06 XantreDev

I can try to provide PR

XantreDev avatar Jun 12 '24 10:06 XantreDev

Try to change the z-index property (with style or props) on your

component.

wizidot avatar Jun 19 '24 14:06 wizidot

Try to change the z-index property (with style or props) on your component.

I use dialog element, it renders on top layer

XantreDev avatar Jun 19 '24 15:06 XantreDev

Hi! You can override a default lib z-indexes by overriding it with direct css customization

jenshenJ avatar Jul 07 '25 08:07 jenshenJ

You can specify any z-index, but the content of the modal will be rendered behind the dialog element. because it's rendered on the top layer

XantreDev avatar Jul 07 '25 08:07 XantreDev

You can specify any z-index, but the content of the modal will be rendered behind the dialog element. because it's rendered on the top layer

Image

I followed your example exactly, and everything works as expected for me. Could you please try to reproduce this issue using the latest version of TonConnect?

jenshenJ avatar Jul 10 '25 15:07 jenshenJ

I will update the reproduction in a few days

XantreDev avatar Jul 10 '25 18:07 XantreDev

I followed your example exactly, and everything works as expected for me. Could you please try to reproduce this issue using the latest version of TonConnect?

The reproduction uses the latest version of the TonConnect. The issue is still valid

<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
Image

XantreDev avatar Jul 16 '25 14:07 XantreDev

I followed your example exactly, and everything works as expected for me. Could you please try to reproduce this issue using the latest version of TonConnect?

The reproduction uses the latest version of the TonConnect. The issue is still valid

Image

Hi, thanks for the reply. Do you have any ideas how to fix this? Will be grateful if you can help.

jenshenJ avatar Jul 18 '25 08:07 jenshenJ