CODEWITHSUNDEEP
csspugrecaptcha
JGallardo
JGallardo

Reputation: 11383

Why is this reCAPTCHA displaying in an odd manner?

I recently added reCAPTCHA to my project

but it is displaying like this

crazy display

That spaces under the input is looking funny. How can I fix that?

And in case anyone is curious about the code 

script(type='text/javascript', src='http://www.google.com/recaptcha/api/challenge?k=MY_KEY')

noscript
  iframe(src='http://www.google.com/recaptcha/api/noscript?k=MY_KEY', height='300', width='500', frameborder='0')
  br
  textarea(name='recaptcha_challenge_field', rows='3', cols='40')
  input(type='hidden', name='recaptcha_response_field', value='manual_challenge')

Yes, the above is in jade. So if you have a suggestion for other captcha type solutions for a Node.JS and Express project, please leave a comment.

Upvotes: 1

Views: 531

Answers (2)

Bryan Myers
Bryan Myers

Reputation: 559

In addition to Mike Causer's answer code I had to add this additional CSS to fix mine:

#recaptcha_area table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td {
line-height: normal;}

If anything else comes up I suggest using the browser's element inspector to systematically go through your DOM's reCaptcha nodes and uncheck all Zurb Foundation css that is being applied until you see reCaptcha displaying like it should. That's how I found out what CSS code I had to override.

Upvotes: 1

Mike Causer
Mike Causer

Reputation: 8324

Looks like Foundation has compatibility issues with it. Add this:

#recaptcha_area input[type="text"] {
  display: inline-block;
  height: auto;
}
#recaptcha_response_field {
  margin: 12px 0 0 0!important;
}

Upvotes: 4

Related Questions