Forums

I have placed a recaptcha custom element in my form, but the elemnt is being placed outside of the div and ends up over the top of a previous element on the form.

You can see the issue at :
http://www.questleisure.com/index.php?option=com_chronoforms&chronoform=awning_registration

The above is complete except for the recaptcha, but I'm constantly trying the different options at the moment to get the recaptcha object to line up so the form may change when you look at it.

I have tried adding margin and padding via the load css option and the recaptcha div id. I can see the affect the div (I also add a border to ensure that the css is being read), but I can never more the recaptcha element down so it lines up correctly.

Cheers

I have managed to fix the alignment issue by doing the following:

1. Change the custom element to include a div and class. The custom element code is now:

<div class="recap">{ReCaptcha}</div>

2. Edit the CSS for the form to include two new entries, one for the div that contains the recaptcha code above (this ensures that any elemenst afterwards line up correctly) and one for the recaptcha div itself. The code is:

.recap
{
height:150px;
}
#recaptcha_widget_div
{
padding-top: 185px;
}

3. The above code means that the .recap div (i.e. my custom element) is 150px high and the next element (in my case the submit button) starts at the right place. The #recaptcha_widget_div bit moves the recaptcha element down the form. I have my labels above the elements hence the height being 185px; if I had my labels to the left of the elements I would have set this to 150px; and added another line :

padding-left:100 px;

to line everything up nicely.

Hi Adam,

Sorry, I only just got to this post. There was a fix for ChronoForms v3 in this post if that is any help but it looks as though you've solved it now.

Bob

Modified the custom html element and joomla.css with the following code but am still experiencing the recaptcha element overlaying other form elements on the page. Using a RocketTheme template. Is there a different CSS I should modify instead? thanks.

.recap
{
height:150px;
}
#recaptcha_widget_div
{
padding-top: 150px;
padding-left:100 px;
}

Hi lburgard ,

Please use your preferred web developer tools to check exactly what CSS is being applied to the ReCaptcha box: F12 in IE8 or IE9, Shift+Ctrl+I in Chrome, FireBug in FireFox, DragonFly in Opera.

Bob