PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Datepicker, Timepicker and reCAPTCHA issues

Gravity Support Forums » Plugin Support » Gravity Forms

  1. 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 11 years ago on Tuesday July 2, 2013 | Permalink

  2. 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 11 years ago on Wednesday July 3, 2013 | Permalink

  3. reubz
    Member

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

    Posted 11 years ago on Wednesday July 3, 2013 | Permalink

  4. reubz
    Member

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

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

  5. Richard Vav
    Administrator

    @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 11 years ago on Friday July 5, 2013 | Permalink

  6. 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 11 years ago on Friday July 5, 2013 | Permalink

  7. reubz
    Member

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

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

  8. Richard Vav
    Administrator

    @reubz you're welcome.

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

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