The setup "stepping" is not working for the Spinner field in the embedded form

  • Profile Image
    Asked on April 16, 2014 at 11:30 AM

    Dear Sirs or Madams,


    in the following form Item #input_9 refuses to work properly in Chrome since only today in the enbedded version on our website. (everything works fine here) (buggi in Chrome)

    It should be possible (as it is in Safari) to ad values with steps of 0.01. This works in Safari - in Chrome one can only enter in steps of 1.

    We use this form for a running fundraising campaign and realy need this issue toi be solved quickly.

    Thanks a lot for any hints!


    Best regards


  • Profile Image
    Answered on April 16, 2014 at 12:35 PM

    I see what you mean, its stepping must be with decimals, but it does not show the decimals in the embedded verion of the form. So, probably this function is affected by some script conflict between your form and your web page due to the method you used to embed your form.

    Please try re-embedding your fom using the iframe code at this time, here is how to get the iframe code: Getting the form iframe code

    That way your form script will be protected in a frame.

    Please inform us if the issue still persists.


  • Profile Image
    Answered on April 16, 2014 at 12:45 PM

    Hi EliezerN,


    thanks a lot for your super quick respond.

    Embadding form as iframe infact solves my very issue - BUT then the submitt-button gets cut at the lower end just below the captcha:



    Thanks for further advice!

  • Profile Image
    Answered on April 16, 2014 at 02:41 PM

    Please adjust the height to 100% and/or change the scrolling property to "yes"

    <iframe onload="window.parent.scrollTo(0,0)" src="" allowtransparency="true" name="40767186452360" id="40767186452360" style="width: 100%; border: medium none; height:100 %; " frameborder="0" scrolling="yes"></iframe>

    Or you can increase the current height: 1180px to  1210 px or so

  • Profile Image
    Answered on April 16, 2014 at 03:24 PM

    Hi Jeanette,

    thanks for your respond.

    Enabeling scrolling somehow does the job. It's not looking nice, but'll do for now.

    What I find really weird is, why no change of hight (neither to 100%, nor to astronimic 5000 px) has any effect. - Why did you asume it was set to 1180 px? - My index.html states it was set to 1462 px.

    Am I searching at the wrong place and this trouble is caused by my html framework?

    Thanks a lot an best regards!



    P.S.: I didn't find the time so far to try your hint for reading data from form's databases. I will, of course  respond as soon as I was successfuil! :-)

  • Profile Image
    Answered on April 16, 2014 at 05:11 PM

    The 1180 px is what the iFrame code renders by default. So far I see you have given 1140px to the height of the iFrame.

    But I also see this is between <div> tags, so you should remove those tags in order to let the hight to increase.


  • Profile Image
    Answered on April 18, 2014 at 02:41 AM

    This is getting sort of weird…


    Checking the html with Chrome I get the following:


    <iframe id=​"JotFormIFrame" onload=​"window.parent.scrollTo(0,0)​" allowtransparency=​"true" src=​"http:​/​/​​form/​40767186452360" frameborder=​"0" style=​"width:​ 100%;​ height:​ 1015px;​ border:​ none;​" scrolling=​"yes">​

    While at the same time my index.html contains the code as follows:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//" frameborder="0" style="width:100%; height:1426px; border:none;" scrolling="yes"></iframe>

    And you receive a hight of 1140 px checked on Firefox.


    I guess I need to read some more about what iframes realy do and what browsers do with their settings.


    On my website iframe is nested in div-tags, as this produces the grid of my website using bootstrap framework.

  • Profile Image
    Answered on April 18, 2014 at 04:45 AM

    The height is changed dynamically based on what is entered on the form using Javascript. If the height is stifled by the containing div, then the content will appear hidden. 

    You can fix this by adding an overflow style property to the containing div opening tag <div overflow="scroll">

    You have other value options with the overflow property as shown here

    The other option would be to increase the containing div height to fit the most height the form can adjust to - breathing room, if you will.


    I checked your webpage, and it appears you resolved the issue?


    In any case, this thread seems to address two different issues (related, but different) - The up/down stepping arrows not showing decimal placement, and the height of the form due to the proposed solution.

    If the height issue is still persisting, kindly open a new thread by clicking on this link.

    Glad to be of service.