Tagged: calendar, CONTACT FORM, datepicker, enfold
-
AuthorPosts
-
August 25, 2015 at 5:54 am #492615
Hi
I am working on my new site in a test environment using Enfold Child (I have WP 4.3 and Enfold 3.3.1 but the problem was already occurring with previous versions, I just didn’t find the time to report it ;-)
The problem is occurring on mobile devices when opening a calendar on a contact form placed on the top left side of the page, where I use the datepicker function. The calendar is hidden under the menu bar. I have access to an iphone (IOS 8.4) and a Windows Phone (WP 8.1) and the results are similar. It seems that the calendar box is aligned to the middle of the input field.
On the WP the problem is always occurring. On the iphone the problem is not occurring if I open the calendar without scrolling down the page (in this case the upper margin of the calendar box is aligned with the upper margin of the field in the contact form), but in case I scroll the page and then click on the field, I have the same problem. In order to clarify the situation I took two screenshots, the link is listed in the “private contant” for moderators.
Any clue? Fx. CSS style that I could inject into Enfold child to change the vertical alignment of the calendar box?
Thanks in advance!
August 26, 2015 at 10:36 am #493408Hey!
Try adding this code to the Quick CSS:
.avia-datepicker-div.ui-datepicker { z-index: 100 !important; }
Cheers!
JosueAugust 26, 2015 at 11:09 am #493428Hej Josue
Thanks! It didn’t solve the problems, but there was a small improvement :-)
In the screenshots I sent yesterday, the datepicker was hidden below both the breadcrumbs and the header, now it’s on top of the breadcrumbs, but under the header (I am attaching the link to new pictures).
Hope this can help you to find out what is still wrong….
If you can’t get the datepicker on top of the header, maybe you could try to “move it downwards” !?
Looking forward to hearing from you again. Thanks!
- This reply was modified 9 years, 2 months ago by hotelpetit.
August 26, 2015 at 10:47 pm #493828Hey!
Try increasing the value to 1000:
.avia-datepicker-div.ui-datepicker { z-index: 1000 !important; }
Regards,
JosueAugust 27, 2015 at 6:41 am #493938That worked! Problem solved. A big thank!
August 27, 2015 at 10:57 am #494011You are welcome, glad to help :)
Regards,
Josue -
AuthorPosts
- You must be logged in to reply to this topic.