Popup calendar styling issue

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

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.

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.

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?

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.     

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.

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 Support

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?

 

 

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.     

 

 

JotForm Support

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" 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 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

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

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.

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!!!!!!!!!!! 

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.

I'll think about it.

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.

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? 

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

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.