function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Amit Singh 2236Amit Singh 2236 

LWC/Lightning ReCaptcha Verify Image selection pop up size issue in form

Verify Image selection pop up size issue in form through vf page embedded in LWC/Lightning User-added image
SwethaSwetha (Salesforce Developers) 
HI Amit,
Are you saying that the VF page containing the Recaptcha is not responsive and does not fit the screen if the user resizes the window? You might want to consider CSS overrides with screen size breakpoints to fix the issue

See https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_responsive.htm that explains Responsive VF page design using SLDS

https://www.lightningdesignsystem.com/utilities/sizing/

Hope this helps you. Please mark this answer as best so that others facing the same issue will find this information useful. Thank you
Amit Singh 2236Amit Singh 2236
@Swetha not resizing the window when ever i am checking the captcha checkbox full pop up is not coming as per the above screenshoot
SwethaSwetha (Salesforce Developers) 
Can you share your simplified code that I can use to test this behavior in my org to be able to understand and suggest further? Thanks 
Amit Singh 2236Amit Singh 2236
@Swetha VF page :

<apex:page showHeader="false" sidebar="false" >
     <apex:includeLightning />
    <html>
      <head>
        <title>reCAPTCHA demo: Explicit render after an onload callback</title>
        <script type="text/javascript">
          var verifyCallback = function(response) {
              parent.postMessage("Unlock", " ");
              //   console.log('Unlock----',Unlock);

          };
          var onloadCallback = function() {
              grecaptcha.render('html_element', {
                  'sitekey' :'Secret Key',
                  'callback' : verifyCallback,
                  'expired-callback': function () {
    grecaptcha.reset();
    console.log('recatpcha');
  }
              });
          };
        </script>
      </head>
      <body>
        <form action="?" method="POST">
          <div id="html_element"></div>
            <br/>
            <input type="submit" value="Submit" style="display:none"/>
        </form>
      <!--<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async="" defer="">
        </script> -->
          <script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async="" defer=""></script>
      </body>
    </html>
SwethaSwetha (Salesforce Developers) 
I have tried with below snippet and it works without any size issues. 
<apex:page showHeader="false" sidebar="false" >
     <apex:includeLightning />
<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'MY_SITE_KEY'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit"/>
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async="" defer="">
    </script>
  </body>
</html>
</apex:page>
Please see the below images
User-added imageUser-added image
I am using Firefox(latest version) Can you share your browser specifications? Is the window 100% sized?
Amit Singh 2236Amit Singh 2236
@Swetha Thanks
Amit Singh 2236Amit Singh 2236
@Swetha thanks but i am using chrome in that i am facing the issue
SwethaSwetha (Salesforce Developers) 
I just tested in Chrome and it works well there too. (I noticed a slight difference in your code and mine in terms of additional javascript ) You might want to try  overriding the styling in your own CSS with something like  
height: 100% !important;

See the below links for more details:
https://stackoverflow.com/questions/28594842/no-captcha-recaptcha-resizing
https://stackoverflow.com/questions/45643077/recaptcha-v2-image-select-popup-iframe-fixed-height-too-small 
https://stackoverflow.com/questions/21988870/responsive-recaptcha-without-image-cut-out/23160104

Hope this helps you. Please mark this answer as best so that others facing the same issue will find this information useful. Thank you
Amit Singh 2236Amit Singh 2236
Thanks Swetha height:100% important is not working in my case
SwethaSwetha (Salesforce Developers) 
Hi Amit, Unfortunately, as I am not able to replicate the scenario you are facing at my end, I am out of ideas. Have you also reviewed the approaches mentioned on other relevant links to see if it can help?

https://stackoverflow.com/questions/28594842/no-captcha-recaptcha-resizing
https://stackoverflow.com/questions/45643077/recaptcha-v2-image-select-popup-iframe-fixed-height-too-small 
https://stackoverflow.com/questions/21988870/responsive-recaptcha-without-image-cut-out/23160104

Thank you
Yogendra JangidYogendra Jangid
Hi,

You can consider implementing the google recptcha in lightning web component and this doesn't require any vf page either.
https://inevitableyogendra.blogspot.com/2021/09/using-google-recaptcha-v2-in-lightning-web-component.html
J BaylesJ Bayles
I had a similar issue. Using LWC it still nests the google captcha in an "iframe". You have have to just all the extra space as the iframe height it isn't dynamic. I have added the height. It seems like the OP is doing something like I am, which is slightly unconventional, and combines a couple methods and so in order to get the events to be caught at the right level you're having to render captcha a certain way.