Popup calendar styling issue

  • Profile Image
    plungefetish1
    Asked on August 15, 2019 at 04:46 PM

    My popup calendar appears at the edge of the iframe so that it is covered and cannot be used. How can I fix this?


    https://www.jotform.com/build/92263485568166


    1565901938cal.PNG

  • Profile Image
    jonathan
    Answered on August 15, 2019 at 05:18 PM

    Using only the URL link of the form did not present the same issue.

    1565903681zzz 2019-08-16 05.13.22.png

    So it is possible the issue only occur on the embedded form on the website.

    Please share to us the URL of your website where we can also test the actual form used.

    If the embedded form is not using the iframe code, I suggest you try first also re-embedding and used instead its iframe embed code.

    Guide : Getting the Form iFrame Code


    Let us know if issue persist.

  • Profile Image
    plungefetish1
    Answered on August 15, 2019 at 09:25 PM

    Hi,

    I copied the embed code from jotform and put it on this web page:

    https://plungefetish.com/rates.php


    It is still not showing the lower part of the calendar.

    1565918686jklo.PNG

  • Profile Image
    Richie_P
    Answered on August 15, 2019 at 10:20 PM

    I have checked the form embedded in your web page and it seems the calendar is working correctly.

    Can you please try clearing your browser's cache and let us know if the issue still remains?

  • Profile Image
    plungefetish1
    Answered on August 16, 2019 at 08:42 AM

    No it is not working correctly.

    Please see the screen capture I attached in an earlier message, it shows the form further down the page.   It works at the top of the page but not when you continue down the form .   You must select payment option B from the DD slick known as PayOps and then select 1-2 or 3 payments.  When you select the payment dates that is when the calendar is not visible.     

  • Profile Image
    Richie_P
    Answered on August 16, 2019 at 09:00 AM

    I was able to replicate the issue when I scrolled down.

    We can try to increase the height of your iframe to 3811px instead of 3711px.

     <iframe id="JotFormIFrame-92263485568166" title="Plunge Booking Form 2020V4" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/92263485568166" frameborder="0" style="width: 1px; min-width: 100%; height:3811px ; border:none;" scrolling="no" > </iframe>

    Please give it a try and let us know how it goes.

  • Profile Image
    plungefetish1
    Answered on August 16, 2019 at 10:21 AM

    It did not work on.  I changed the frame height to 3811 in the HTML of 

    It is still not showing the lower part of the calendar.

    1565918686jklo.PNG

     
     
    Profile Image
    Richie_P
    Answered on August 15, 2019 at 10:20 PM

    I have checked the form embedded in your web page and it seems the calendar is working correctly.

    Can you please try clearing your browser's cache and let us know if the issue still remains?

     
    Profile Image
    plungefetish1
    Answered on August 16, 2019 at 08:42 AM

    No it is not working correctly.

    Please see the screen capture I attached in an earlier message, it shows the form further down the page.   It works at the top of the page but not when you continue down the form .   You must select payment option B from the DD slick known as PayOps and then select 1-2 or 3 payments.  When you select the payment dates that is when the calendar is not visible.     

     
     
    Profile Image
    Richie_P
    Answered on August 16, 2019 at 09:00 AM

    I was able to replicate the issue when I scrolled down.

    We can try to increase the height of your iframe to 3811px instead of 3711px.

     <iframe id="JotFormIFrame-92263485568166" title="Plunge Booking Form 2020V4" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/92263485568166" frameborder="0" style="width: 1px; min-width: 100%; height:3811px ; border:none;" scrolling="no" > </iframe>

    Please give it a try and let us know how it goes.

     
    Your Answer
     
     

     It did not work .

    In the snip below you can see that I changed the frame height to 3811 in the HTML of https://plungefetish.com/rates.php  .

    I also cleared my browsers cache



    1565964784rates.php.PNG  I tested it again at https://plungefetish.com/rates.php and here is a snip of the results:

    1565965234not.PNG

  • Profile Image
    Richie_P
    Answered on August 16, 2019 at 10:39 AM

    Thank you for the testing the custom CSS.

    We can try to add scrolling effect to your Iframe scrolling="yes"

    Please give it a try and let us know how it goes.

  • Profile Image
    plungefetish1
    Answered on August 16, 2019 at 11:12 AM

    It did not work.

    When I click on the payment 2 box the calendar and scroll bar appear. 

    1565968114scroll bar appears.PNGTThen when I move the cursor and click on the scroll bar to scroll down the calendar disappears aand because there is no calendar the scroll bar disappears!!!!!!!!!!!1565968323after clicking on scroll bar t 

  • Profile Image
    Richie_P
    Answered on August 16, 2019 at 11:28 AM

    I have checked the embedded form and it seems to be working correctly at my end.

    However, I was able to replicate the issue regarding selecting the scrollbar to scroll the date picker field.

    You may try to scroll using the mouse when you try to pick a date.

    Screen cast:

    15659691041.gif

    Please give it a try and let us know your thoughts.

  • Profile Image
    plungefetish1
    Answered on August 16, 2019 at 07:34 PM

    I'll think about it.

  • Profile Image
    Vanessa_T
    Answered on August 16, 2019 at 08:05 PM

    I went to your website and tested the form but I could not replicate the issue. Were you able to solve this already?

    1566000108A.gif

    I noticed the Pick Your Payment Dates text block is already below the calendar fields. That would indeed help to reserve a space at the bottom of the calendar so when the calendar pops up, it will just show at the top of the text.

  • Profile Image
    plungefetish1
    Answered on August 20, 2019 at 06:40 PM

    I moved the Pick Your Payments textbox below the date pickers because nothing else would work.   It would be much better if the Pick Your Payments textbox appeared before the date pickers the way it was originally conceived.  Is that possible? 

  • Profile Image
    Vanessa_T
    Answered on August 20, 2019 at 08:16 PM

    I understand your preference, let me just try to make some tests on my end and will get back to you for an update.

  • Profile Image
    Vanessa_T
    Answered on August 20, 2019 at 08:31 PM

    Hi, unfortunately, aside from the suggestions that my colleague has offered before, there is currently no other way to edit the date picker's behaviour since it is being triggered and rendered thru Javascript.

    If you like, we can forward this to our level 2, however, please note that we could not guarantee a timeline for it since due to the number of requests our developers get, they handle requests by severity and urgency.

    As of now I would suggest you add any content (like the payment text) below the date pickers so that the calendar popup can be displayed properly.