reCAPTCHA width on the main comment form

Bug Reports

Last Post by cartoonist 4 years ago

4 Posts

2 Users

0 Reactions

1,626 Views

RSS

Posts: 3

cartoonist

Topic starter

Aug 09, 2021 5:17 pm

(@cartoonist)

Active Member

Joined: 4 years ago

The reCAPTCHA width in the main comment form has a wrong width causing it to be misaligned with respect to other elements. The left column has the width of 43%, so the right column's width should be 57%. But it is set to 55%. This change fixed the issue for me:

--- wpdiscuz.js 2021-08-09 16:16:48.563122385 +0000
+++ wpdiscuz.js        2021-08-09 16:16:44.467102081 +0000
@@ -446,7 +446,7 @@
                                "-webkit-transform": "scale(0.8)"
                        });
                        $("#wpdcom .wpd_main_comm_form .wpd-form-col-left").css({"width": "43%"});
-                       $("#wpdcom .wpd_main_comm_form .wpd-form-col-right").css({"width": "55%"});
+                       $("#wpdcom .wpd_main_comm_form .wpd-form-col-right").css({"width": "57%"});
                        $("#wpdcom .wpd-secondary-form-wrapper .wpd-form-col-left").css({"width": "30%"});
                        $("#wpdcom .wpd-secondary-form-wrapper .wpd-form-col-right").css({"width": "70%"});
                }

It would be great if it will be included in future versions.

Topic Tags

recaptcha styling

3 Replies

Posts: 8196

Asti

Support

Aug 11, 2021 6:27 am

(@asti)

Illustrious Member

Joined: 8 years ago

Hi @cartoonist,

This is just a small CSS conflict with the theme or other plugins. Please leave some example URL to allow us to debug the issue and provide some solution for you.

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

Posts: 3

cartoonist

Topic starter

Aug 11, 2021 8:51 am

(@cartoonist)

Active Member

Joined: 4 years ago

Thanks Asti for your reply!

I reverted the `assets/js/wpdiscuz.js` file back to the original and here is the example URL: https://car.toonist.ir/?p=1. The site is in Persian language which is an RTL one. The main comment form has this issue. You can compare it with comment forms in the replies in the site.

I noticed that the sum of the right column width and the left one is always 100% in secondary comment forms, but it is not the case for the main one.

Posts: 3

cartoonist

Topic starter

Aug 11, 2021 4:49 pm

(@cartoonist)

Active Member

Joined: 4 years ago

I change the theme to "Twenty Twenty-One" and the reCAPTCHA looks totally fine. As you mentioned, it is just a small conflicts with the theme. I would be grateful if you could give me a hint where should I look for to fix it. Thanks 🙂