CSS for ReCaptcha « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Jez
Member

Hello All,

I have a problem trying to style the Re-Captcha div.

http://img220.imageshack.us/img220/3166/screenierecaptcher.png

What I want is to make the labels left align on the entire form except on RE-Captcha where I want the image to be left aligned either:

with the label above
no label at all (re-captcha is pretty self explanatory)

As you can see from the image above, the label pushes the captcha out of its containter in some browsers, though in some versions of IE it seems ok.

Ive looked at the form css and cannot fathom how I would go about making this change, as the php generates the divs etc. If I add a custom style, it does not seem to kill the labels container...

Im a bit stuck!

Posted 14 years ago on Friday November 19, 2010 | Permalink
Kevin Flahaut
Administrator

I'm not clear on what you want to do here. You want all the fields to have left labels except for the reCaptcha container - you want it to have a top label?

Also, a screencap is nice, but doesn't let me inspect/test on your form. Can you include a URL to your form?

Posted 14 years ago on Friday November 19, 2010 | Permalink
Jez
Member

Hi Kevin,

Yes, I want al fields to have left labels except for re-captcha where I would like it top level, or removed entirely.

It actually displays "top align" in IE, but I think that is just because it is dropping down due to the container size, in FireFox it displays the label left align as per the screen shot I posted.

The URL is below, the form is conditional so just alter the drop down list to reveal the full form:

http://debtadviceuk.net/

Thanks for your help.

Posted 14 years ago on Friday November 19, 2010 | Permalink
Kevin Flahaut
Administrator

The containing list item has a unique ID so you can use CSS inheritance to do pretty much anything you need.

Try adding this to your theme stylesheet.

body .gform_wrapper li#field_1_16 label {display:none}

test screenshot

Posted 14 years ago on Friday November 19, 2010 | Permalink
Jez
Member

Thanks for your help but that did not work. The html I dont want shown is:

'<label for="input_3_16" class="gfield_label">Enter Code</label>'

I noticed it was 3_16 as opposed to 1_16 and changed that, which did the left align like I wanted, however, the message "enter the two words below" dissapreared from re-captcha, which I really need if the label is also going to be missing.

Actually, if you check your own screen shot you can see that label missing too...

Do you have any other suggestions?

Posted 14 years ago on Saturday November 20, 2010 | Permalink
Kevin Flahaut
Administrator

No, the containing list ID that I'm targeting is correct. Look at your markup closely and you'll see that it's "field_1_16".

Use this instead. It only targets the label with the "gfield_label" class so the reCaptcha div won't inherit from the rule.

body .gform_wrapper li#field_1_16 label.gfield_label {display:none}

screenshot

Posted 14 years ago on Saturday November 20, 2010 | Permalink
Jez
Member

Hi Kevin,

I have different copies of that form in different places, we were looking at different ones, sorry!

Anyway, your latest tweak to just target gfield_label did the trick.

Thanks very much your your help.

Jez

Posted 14 years ago on Sunday November 21, 2010 | Permalink
Kevin Flahaut
Administrator

Understood. Glad that helped you out. Thanks for the update.

Posted 14 years ago on Sunday November 21, 2010 | Permalink