Community Forums › Forums › Archived Forums › Design Tips and Tricks › Gravity Forms Date Picker Calendar Is Not Displaying Correctly
- This topic has 4 replies, 2 voices, and was last updated 6 years, 1 month ago by Paul.
-
AuthorPosts
-
February 17, 2018 at 5:02 pm #216728PaulParticipant
Hi All,
I am using gravity forms that includes a date picker calendar, but it doesn't seem to display correctly as per their preview page.
Here is a link to see the differences (picture only), the way it should display is on the left but the way its displaying on my page is on the right:
Here is a link to where the actual form is located:
I also noticed that within the gravity forms form builder, the section for the date picker field -> appearance, there is a section for custom css class, could something go in there to fix its appearance?
Any help on this would be greatly appreciated (along with where to put any code or the fix).
Thanks all.
Paul.
https://blacktiegroup.com.au/live-band-quote-request/February 18, 2018 at 7:12 am #216741Victor FontModeratorThe date picker position is calculated in Javascript in real time when you enter the field. You need to take this question up with Gravity Forms support. It is not related to either the Genesis Framework or Studio Press themes. Troubleshooting this would require us to own Gravity Forms and understand its inner workings. That's a little beyond the scope of what we can do as a community of volunteers.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?February 19, 2018 at 3:52 am #216764PaulParticipantHi Victor,
Thanks so much for your reply. I contacted gravity forms as suggested and this is the reply I received:
"It's not a Javascript issue and it's not an issue in Gravity Forms as it's working fine in preview and it will work fine also if you try it using any default WP theme. The issue is caused by your theme CSS overriding the default styles for the datepicker. You can see an example of this in the following screenshot: https://www.dropbox.com/s/4pwzqszm7hpgttl/2018-02-19_3507.png?dl=0
You will want to contact with your theme developer to get assistance to avoid your theme creating the conflict with its custom styling and prevent doing it again in a future theme update."
February 19, 2018 at 11:29 am #216772Victor FontModeratorGravity forms is not telling you the right thing. The Genesis framework does not insert inline styles into the Gravity forms datepicker. If you view the source code on your site, this is where the positioning is located:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 614.767px; left: 186px; z-index: 1;">
The position style is inserted into the parent datepicker div either at run time (Javascript) or by a plugin. The Genesis framework does not do this, and neither does the Metro Pro theme. Do you have any styling plugins installed that would alter the jQuery UI styles?
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?February 20, 2018 at 9:46 pm #216847PaulParticipantThe problem has now been fixed.
The solution from Studiopress for those that run into the same problem:To adjust the display of the date picker, you will need to edit the width in the following section of the theme's style.css file:
/* Forms
--------------------------------------------- */input,
select,
textarea {
background-color: #f5f5f5;
border: 1px solid #ddd;
box-shadow: 0 0 5px #ddd inset;
color: #999;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
padding: 16px;
padding: 1.6rem;
width: 100%;
} -
AuthorPosts
- The topic ‘Gravity Forms Date Picker Calendar Is Not Displaying Correctly’ is closed to new replies.