Custom CSS: How to apply custom width
Nabid opened this issue · 6 comments
Using Angular2-Recaptcha for Ionic 2.
As I can see the captcha is loaded inside an iFrame. Any idea how do I change the width or apply custom css?
<re-captcha *ngIf="validator.showReCpatcha" (captchaResponse)="handleCorrectCaptcha($event)" (captchaExpired)="handleCaptchaExpire()" site_key="..." class="g-recaptcha" data-size="g-recaptcha" style="width:500px" width="500px" > </re-captcha>
You will have to either use the data-size parameter (https://developers.google.com/recaptcha/docs/display#render_param) or use the below css to transform the widget:
.g-recaptcha { transform:scale(0.77); transform-origin:0 0; }
Well, I tried with data-size parameter, but in both case the width was too small in my case. Also <re-captcha> needed to be written inside a <div class="g-recaptcha"> wrapper for the transformation to work.
So, the re-captcha was transformed (stretched after transformation) which was not acceptable in our case! Finally we managed to change the width of all other fields to match the width of re-captcha.
Hello @Nabid , i am also trying to implement Angular2-recaptcha with Ionic 3, but it fails with the error message:
"error for site owner invalid domain for site key".
How did you get around this? I've both tried to create a android public key that has the app package listed in whitelist and a web key but since it serves the app from file:// in does not match any domain.
Did you solve this issue or are you only using the addon with the web version of the app?
Hi @ivanstefan17 , we faced the same issue. The Angular2-ReCaptcha and site key worked fine in browser. But didn't work in android build. Both of the web key and android key failed. We could not find any workaround with this.
@Nabid How did you implement security to prevent server flooding then? Did you use a replacement for captcha? I am willing to change the captcha for something else if there is a possibility. We use the same API for both the web and mobile application.
Thanks for your reply btw :)
Well we also tried putting pure HTML/JS code for Google Recaptcha V2 into android build, that did not work either. For the time being, we put it aside because of the tight deadline. So right now there is no Recaptcha security in the android/ios version of the product we are working.