-
plungefetish1Asked on August 15, 2019 at 4: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
-
jonathanReplied on August 15, 2019 at 5:18 PM
Using only the URL link of the form did not present the same issue.
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.
-
plungefetish1Replied on August 15, 2019 at 9: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.
-
Richie JotForm SupportReplied 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?
-
plungefetish1Replied on August 16, 2019 at 8: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.
-
Richie JotForm SupportReplied on August 16, 2019 at 9: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" onDISABLEDload="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.
-
plungefetish1Replied 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.
JotForm SupportRichie_PAnswered on August 15, 2019 at 10:20 PMI 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?
plungefetish1Answered on August 16, 2019 at 08:42 AMNo 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.
JotForm SupportRichie_PAnswered on August 16, 2019 at 09:00 AMI 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" onDISABLEDload="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 AnswerIt 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
I tested it again at https://plungefetish.com/rates.php and here is a snip of the results:
-
Richie JotForm SupportReplied 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.
-
plungefetish1Replied 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.
TThen 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!!!!!!!!!!!
-
Richie JotForm SupportReplied 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:
Please give it a try and let us know your thoughts.
-
plungefetish1Replied on August 16, 2019 at 7:34 PM
I'll think about it.
-
Vanessa_TReplied on August 16, 2019 at 8: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?
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.
-
plungefetish1Replied on August 20, 2019 at 6: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?
-
Vanessa_TReplied on August 20, 2019 at 8: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.
-
Vanessa_TReplied on August 20, 2019 at 8: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.