How to override z-index of modal?

[0xTimepunk]

I am using react-financial-charts (https://github.com/reactivemarkets/react-financial-charts) and the following happens:

I cannot select the wallets where the chart is being drawn (some elements appear even in front of the web3modal). Do you think I can solve this by overriding the z-index? If so what is the appropriate css class to override? Thank you

[pedrouid]

The parent element of the modal is identified by WEB3_CONNECT_MODAL_ID have you attempted to increase the z-index to be higher than the ones used by react-financial-charts??

[0xTimepunk]

@pedrouid I was doing it like this, but I can try to manually override that element

[pedrouid]

Interesting, that could be useful. Theme is used for colors only... I will leave this issue open to include other overrides in the future but for now it would be best to just target it with a stylesheet

[0xTimepunk]

Interesting, that could be useful. Theme is used for colors only... I will leave this issue open to include other overrides in the future but for now it would be best to just target it with a stylesheet

That's what I will do. Thanks! (closed by mistake)

[metafraction]

Any updates on this?

[Xh0st]

Any updates?? How to solve this?

[Xh0st]

Interesting, that could be useful. Theme is used for colors only... I will leave this issue open to include other overrides in the future but for now it would be best to just target it with a stylesheet

That's what I will do. Thanks! (closed by mistake)

How did you solved ?

[rafinskipg]

Please, z-index of 2 is not enough. Allow people to override it

[giovas94]

Hi @Xh0st @rafinskipg,

You just need to add the z-index in the modal calss in your global css file, like this:

.web3modal-modal-lightbox { z-index: 10 !important; }

[70nyIT]

Understand the trick of the class, but being able to override zIndex keeps the code much more clean. +1 for me for this feature!

[0xNoSignal]

Please make it z-Index editable out of the box

[nicolas-zozol]

Adding js code to maintain and document when css nails it is not a good idea.

.web3modal-modal-lightbox.web3modal-modal-lightbox { z-index: 10; } mays work without the !important addition.

[GorgeousPuree]

Such a small feature, but would keep code cleaner. +1 from me.

[xzilja]

With stable version 2.0.0 of Web3Modal now released, we are officially dropping support for version 1.x Due to this this issue/pr was marked for closing. It is highly recommended to upgrade as 2.x will be receiving further updates that will enable functionality for some of our newer sdks like auth and push as well as support for WalletConnect v2 (See this post about WalletConnect v1 being deprecated https://medium.com/walletconnect/walletconnect-v1-0-sunset-notice-and-migration-schedule-8af9d3720d2e)

If you need to continue using Web3Modal 1.x and require this feature/fix implemented, we suggest adding it via forking V1 branch.

[carlosrsabreu]

For those who are struggling with this, just add this to your CSS:

body {
  --w3m-z-index: 1500;
}

[mqklin]

There is also a documented way: https://docs.walletconnect.com/web3modal/javascript/theming#themevariables

createWeb3Modal({
  //...
  themeVariables: {
    '--w3m-z-index': 1500,
  }
})