Slider Widget: How do I prevent the jumping problem with Apple IOS devices when using Sliders with Calculated Result

  • Profile Image
    Asked on January 18, 2017 at 04:46 AM

    Hi there,


    I'm pretty new to Jotform, but must say - I am loving it.  I've embedded (iframe) my form into my Weebly site and it works beautifully on all platforms except IOS browsers (I've tried Safari, Chrome and Firefox).


    I'm having two problems: 

    1. Whenever you touch a slider the screen jumps to the bottom of the page.

    2. The fonts I've tried to embed don't seem to be 100%


    My form is here:


    the webpage is:


    I look forward to some help if anyone can provide a solution.


    Many thanks,



  • Profile Image
    Answered on January 18, 2017 at 06:56 AM


    I checked the issue on a emulator of IOS devices, and I couldn't replicate the issue:

    I can't replicate the issue on an IMac computer.

    However, I can replicate the issue on an Ipad. Also there is another issue that when third or fourth option is selected, the slider gets narrowed down:


    The jumping issue most probably related to your website settings. I checked your iframe settings, and everything seems to be in right place. Hence please contact Weebly support about this issue.

    I am escalating the issue to our developers so they will fix the slider widget issue. I will also ask them to look at the jumping issue.

    We will notify about the issue via this thread. 

    Thank you.

  • Profile Image
    Answered on January 18, 2017 at 07:15 AM

    Hi Seth - I will investigate the Weebly side of things and see if their support is as good as yours (which is awesome FYI).


    Many thanks.

  • Profile Image
    Answered on January 19, 2017 at 03:51 AM

    Hi Seth (etal),


    I've had a play with Weebly and done some Googling and seem to have a workaround the jumping problem. I have also tested the form on another new Weebly page with minimal (a couple of paragraphs of text) other content.

    I had no problems with the jumping until I added other content to my page. Once the page was about twice as big as the form, then the jumping problem reoccurred.

    That led me on a search for solutions that mentioned page length. I found two of interest and have successfully applied their workaround...

    I used a combination of the two before my <iframe...>:


    html, body {

        height: 100%;

        width: 100%;

        overflow: auto;

        overflow-y: scroll;

        -webkit-overflow-scrolling: touch;


    .scroll-wrapper {

    -webkit-overflow-scrolling: touch;

      overflow-y: scroll;


    .scroll-wrapper iframe {

    /* nada! */



    <div class="scroll-wrapper">


    <iframe id="JotFormIFrame-700413........

    and the rest of the iframe and script and then close the div......



    My feeling is that it is neither a Jotform nor a Weebly problem, rather the bug lies with the Apple iOS and has done so for a number of years.


    I am however still having the problem with the fonts not working on iOS and the error with the sliders getting narrowed - I look forward to your help with those issues.





  • Profile Image
    Answered on January 19, 2017 at 05:23 AM

    Thanks for providing us more info.

    I can see that the bug ticket is still open for this issue. The error with the sliders getting narrowed is being handled by our developers and we will update you in this thread once there are any updates.

    Regarding to the fonts not working on iOS, I was able to replicate the issue.Hence, I'll escalate this to our devs.

    If you need further assistance, please let us know.


  • Profile Image
    Answered on January 22, 2017 at 06:41 PM


    Just wondering if any progress has been made on the sliders narrowing? I have been playing with a cloned version of my form with no luck. Just to clarify, it's not particular sliders that get narrowed, it is any slider other than the first one you select. i.e., If in the first radio button selection you choose number 3 (for example) and then choose any other radio button the sliders for the other 3 sections are narrowed. If you click back on number 3 again - it is full width.

    It doesn't seem to matter which one you choose first - the other three are narrow.

    Looking forward to a solution.



  • Profile Image
    Answered on January 22, 2017 at 08:29 PM

    Unfortunately we still don't have any updates on this issue. I did some tests on the form and I can see that the issue still persists.

    A temporary workaround I can suggest would be to add the css below into the Custom CSS area of all the slider widgets on your form.

    body {

        width: 600px;


    This code will make the body of the widget have a width of 600px so it doesn't narrow when switching from one radio to another.

    Rest assured our developers are still working on resolving this issue. We will let you know on this thread once we have any news. 
    Thank you.

  • Profile Image
    Answered on February 11, 2017 at 06:55 AM

    I've had to rebuild the form so to suit my website.  The new form has the same problems. It's address is:

    Looking forward to your solution.

    Thanks, Mark



  • Profile Image
    Answered on February 11, 2017 at 10:13 AM

    Hello Mark, 

    I checked your form, but it is not visible:

    But that's just color problem. I wasn't able to replicate the slider narrowing problem:

    Did you embed that new form somewhere?