Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    #493408

    Hey!

    Try adding this code to the Quick CSS:

    .avia-datepicker-div.ui-datepicker {
        z-index: 100 !important;
    }

    Cheers! 
    Josue

    #493428

    Hej 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, 3 months ago by hotelpetit.
    #493828

    Hey!

    Try increasing the value to 1000:

    .avia-datepicker-div.ui-datepicker {
        z-index: 1000 !important;
    }

    Regards,
    Josue

    #493938

    That worked! Problem solved. A big thank!

    #494011

    You are welcome, glad to help :)

    Regards,
    Josue

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.