Can't reposition badge to the bottom left

[esale]

Hi,
I think that I should be able to reposition the recaptcha invisible badge to bottom left by adding badge: "bottomleft" to the helper call, like this:

<%= recaptcha_v3(name: 'g-recaptcha-response-contact', action: 'contact', badge: "bottomleft") %>

however, it doesn't work. I can see when I inspect that it has some effect:

<input type="hidden" name="g-recaptcha-response-contact" id="g-recaptcha-response-data-contact" data-sitekey="..." data-badge="bottomleft" [...]

<iframe src="https://www.google.com/recaptcha/api2/anchor? [...] &amp;size=normal&amp;badge=bottomleft& [...]

but it still doesn't work, the div that matters has the wrong style:

<div class="grecaptcha-badge" data-style="bottomright" [...]</div>

I solved it with CSS extracted from this stack overflow answer:

 .grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
}


.grecaptcha-badge:hover {
  width: 256px !important;
}

but I'd like to know if there is a way to solve it without CSS.

On a side note, I don't know what's the proper way to insert code here, I used backticks with the html and the greater than symbol with the CSS and neither shows it right.

Regards.

[bragovo]

I have the same problem but I need an inline badge and can't use CSS. Why data attributes not working?