search

t49tran / react-google-recaptcha-v3

Google Recaptcha V3 integration for React
MIT License
427 stars 91 forks source link

How to give z-index CSS property to the provider? #111

Open AliBahaari opened 2 years ago

AliBahaari commented 2 years ago

Hello, as you know there is a GoogleReCaptchaProvider within the package. In a project, it's needed to apply a z-index CSS property for arranging layers of objects. I wrote the code below:

<GoogleReCaptchaProvider reCaptchaKey="..." style={{zIndex: 20000}}>
    <App />
</GoogleReCaptchaProvider>

But nothing happens at all. What's the solution?

julianshowshappening commented 2 years ago

I also wish to do this from my end. I don't believe GoogleReCaptchaProvider has support for styles at the moment but I wish it was integrated.

alipiry commented 2 years ago

Hello, as you know there is a GoogleReCaptchaProvider within the package. In a project, it's needed to apply a z-index CSS property for arranging layers of objects. I wrote the code below:

<GoogleReCaptchaProvider reCaptchaKey="..." style={{zIndex: 20000}}>
    <App />
</GoogleReCaptchaProvider>

But nothing happens at all. What's the solution?

Add these lines of code to your css: 

div.grecaptcha-badge {
  z-index: 99999;
}
AliBahaari commented 2 years ago

Hello, as you know there is a GoogleReCaptchaProvider within the package. In a project, it's needed to apply a z-index CSS property for arranging layers of objects. I wrote the code below:

<GoogleReCaptchaProvider reCaptchaKey="..." style={{zIndex: 20000}}>
    <App />
</GoogleReCaptchaProvider>

But nothing happens at all. What's the solution?

Add these lines of code to your css:

div.grecaptcha-badge {
  z-index: 99999;
}

Thanks!