Problem with fuzzy error Recaptcha

Question

I recently started using the new Google Recaptcha method - their new Invisible Recaptcha. I realized that the implementation of this version was a bit different, because you attach the attributes of recaptcha directly to your submit button, which then calls the google recaptcha api and starts the verification process. I have everything that works fine, but one major problem that I encountered is the positioning of the Protected by recaptcha icon.

After adding the recaptcha configuration to my submit button, I start to see the icon to the right of my screen. According to other sites, this icon should just be the rectangular recaptcha logo until it hangs, and then it has to pop out to be the big rectangle that I see initially on my site.

Here is an image of what I see on my site after implementing an invisible recaptcha.

Here is the submit button code containing recaptcha attributes:

<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key"
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>

Note. Other parameters data-badge, such as inlineand bottomleft, cause the same positioning problems.

The form code containing the button:

    <form action="processjoin.php" method="post" id="signupform" style="padding-top:10px;padding-bottom:10px;max-width:50%;">
        <h2 class="sr-only">Login Form</h2>
        <div></div>
        <div class="illustration"><i class="icon ion-ios-pulse-strong"></i>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Your Name" class="form-control" id="name" />
                    </div>
                    <div class="form-group">
                        <input type="text" name="username" placeholder="Username" class="form-control" id="username" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Email" class="form-control" id="email" />
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" placeholder="Password" class="form-control" id="password" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block g-recaptcha" data-sitekey="6LfdMhkUAAAAAHl-LXZm_gPP1g-UX0aWt8sMR4uW" data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
            </div>
            <a href="#" class="forgot">
                <div></div>Already have an account? Sign in.</a>
        </div>
    </form>

I am experiencing two problems with this recaptcha icon:

• The icon is smoothed outside the bounding box object / border type.
• , , . , - . , , .

, , , , , .

Google Chrome , div div, :

, ! , , , , , CSS. , captcha Google.

Answer 1

: https://developers.google.com/recaptcha/docs/invisible#config

data-badge="inline", CSS.

Answer 2

, recaptcha , , line-height .

, JQuery CSS.

JQuery: , ()

, , . Google , , jQuery.initialize by timpler.

initialize.min.js, :

jQuery(document).ready(function() {
    $('.grecaptcha-badge').appendTo("body"); //fix recaptcha positioning to body  
});
$.initialize(".grecaptcha-badge", function() {
    $(this).appendTo("body"); //fix recaptcha positioning to body, even if it loads after the page  
});

CSS: line-height

.grecaptcha-badge {
  line-height:50px !important;
}

, , . , - !