Datepicker, Timepicker and reCAPTCHA issues

Gravity Support Forums » Plugin Support » Gravity Forms

reubz
Member

My form can be viewed here: http://ngamanuwaiata.teroopuatawhai.com/gravity-forms-issues/ and has more information contained therein regarding some of the solutions i've applied to correct these issues. These issues have only just occurred after the recent update.
DATEPICKER ISSUES:
1. Whilst i've addressed most of the datepicker issues with css, i'm still experiencing issues regarding where the calendar is positioned after clicking in the field. Depending on where the field is displayed on the screen (near the top, or near the bottom) It either displays the calendar too far below the field (if near the top), or obscures the field (if near the bottom).
TIMEPICKER ISSUES
2. The time picker displays the "HH:MM" parentheses separator in the incorrect position, where it is currently displayed directly above the "HH" field label.
RECAPTCHA ISSUES
3. The reCAPTCHA box displays incorrectly and the bottom of the box is scrambled slightly. Sorry, I don't know how else to explain what's happening there...

I have been through the forums only to find solutions for the datepicker issue (albeit still slightly unresolved), and I have yet to find any related issues regarding my current timepicker or reCAPTCHA box issue. I'm still very new to Wordpress and I don't know how to check if extra scripts are running, but I have checked and discovered that it's a possible Theme conflict. I have disabled all plugins (problem still existed), and I switched my theme to Twenty Ten where everything displayed correctly and as expected.

I hope you can help with these issues - thanks in advance....

Posted 10 years ago on Tuesday July 2, 2013 | Permalink
clarityconsults
Member

I am have thing same issues with the time colon being shifted out of place please assist. Thanks

Here is a link to my page
http://drnadiabrown.com/services/workshops-speaking/pre-event-questionnaire/

Posted 10 years ago on Wednesday July 3, 2013 | Permalink
reubz
Member

@clarityconsults - I've also noticed that you have a z-indexing issue with your datepicker field.

Posted 10 years ago on Wednesday July 3, 2013 | Permalink
reubz
Member

reCAPTCHA issue resolved - I just changed the theme from White to Clean..

Posted 10 years ago on Thursday July 4, 2013 | Permalink

@reubz your timepicker issue is being caused by your theme CSS setting the input to display: block; in style.css you have the following

input[type="text"], input[type="password"], select, input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
font-family: 'Open Sans','Lucida Sans Unicode','Lucida Grande',sans-serif;
color: #999;
border: 1px solid #e5e5e5;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: block;
font-size: 12px;
margin: 0 0 20px 0;
padding: 10px;
height: auto;
width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

in foundation.min.css you have this

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
background-color: #fff;
font-family: inherit;
border: 1px solid #ccc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
color: rgba(0,0,0,0.75);
display: block;
font-size: 14px;
margin: 0 0 12px 0;
padding: 6px;
height: 32px;
width: 100%;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}

you should be able to override those two by adding the following

.gform_wrapper .gfield_time_hour input, .gform_wrapper .gfield_time_minute input, .gform_wrapper .gfield_date_month input, .gform_wrapper .gfield_date_day input, .gform_wrapper .gfield_date_year input {
display: inline-block !important;
}

The positioning of the datepicker when appearing above and below the field is normal, you can see an example using the wordpress twenty twelve theme at http://gravity.wawrzyniak.me/datepicker/

The style issues with the datepicker will again be due to your theme styles being overly broad and applying extra padding etc. you can override the issues with the month and year drop downs by using the following

#ui-datepicker-div select {
padding: 0 !important;
margin: 2px !important;
width: initial !important;
}

Regards,
Richard

Posted 10 years ago on Friday July 5, 2013 | Permalink

Richard Vav
Administrator
@clarityconsults your time field issue is being caused by the additional padding being applied by the following from your theme's style.css file
```
div.gform_wrapper input, div.gform_wrapper select, div.gform_wrapper textarea {
color: #222;
font-family: 'Helvetica Neue', Arial, Tahoma, sans-serif !important;
font-size: 12px !important;
padding: 7px 7px 6px !important;
}
```
How you solve it is up to you, you can either reduce that padding or alter the width of those inputs. To alter the width of those inputs you would use the following
```
.gform_wrapper .gfield_time_hour input, .gform_wrapper .gfield_time_minute input, .gform_wrapper .gfield_date_month input, .gform_wrapper .gfield_date_day input, .gform_wrapper .gfield_date_year input {
width: 60% !important;
}
```
As for your datepickers header bar and gap before the date table you should be able to resolve that by adding the following CSS to your stylesheet
```
#ui-datepicker-div select {
margin: 5px !important;
}
```
Regards,
Richard
Posted 10 years ago on Friday July 5, 2013 | Permalink
reubz
Member

Thank You Richard!!!! Awesome. works perfectly now.....

Posted 10 years ago on Monday July 8, 2013 | Permalink
Richard Vav
Administrator

@reubz you're welcome.

Posted 10 years ago on Monday July 8, 2013 | Permalink

This topic has been resolved and has been closed to new replies.