Form Height is over running on Ipad and Iphone devices. Help Please!

  • Profile Image
    connecter
    Asked on October 13, 2011 at 07:27 AM

    The forms I have designed run well in IE5 and in Chrome as well as Safari on computer applications.  However on iPad and iPhone versions they over run.

    How can I fix this....main website has be designed using Xara Webdesigner V7.

    While I can create a scrolling placeholder for the form which works on computer, again this code does not work on iPad/iPhone devices, so a solution to fix the for height across all platforms is most desirable.

     

    Thanks

  • Profile Image
    allanftd
    Answered on October 13, 2011 at 08:00 AM

    Hi connecter,

    Thanks for posting your message. Is it possible for you to embed the form using the iframe embed code and then setting the iframe width to around 95% to 100%? Please let us know how it goes.

    Thank you for using JotForm!

    Best,
    Allan 

  • Profile Image
    connecter
    Answered on October 13, 2011 at 08:11 AM

    Mmm interesting result. 

     

    Does not solve ipad over run issue. However in explorer we  we now have a very small iframe with txtscroll...

    do you want to take a quick look before I revert?

     

    Steve

  • Profile Image
    NeilVicente
    Answered on October 13, 2011 at 08:32 AM

    Steve,

    Your embed codes are a little messed up. I am thinking that you manually embedded the form in an iframe inside Xara. Please use the iFrame Embed option in the Embed Form wizard instead.

    To get your form's iframe codes:

    1.  Go to Setup & Embed tab
    2.  Click Embed Form
    3.  Click iFrame



    4.  Copy the codes provided in the succeeding screen

    Modify the iframe codes so that the attribute "scrolling" is set to "auto"

    <iframe allowtransparency="true" src="//form.jotform.com/form/11012027246" frameborder="0" style="width:100%; height:1230px; border:none;" scrolling="auto">
    </iframe>

    Also, try decreasing the height property of the div tag holding the form to around 1230px.

    <div style="position: absolute; left: 260px; top: 203px; width: 756px; height: 1230px; overflow: hidden;">

    Please let us know the results of this solution. Thanks!

  • Profile Image
    connecter
    Answered on October 13, 2011 at 09:47 AM

    I think I am getting there. 

    The form height restriction seems to help if set to 1150 although not sure this is wholey responsible for solving the issue.  As I reduced the width of two of the txtscroll boxes so they fit onto one line as ooposed to two seperate lines.  I would also be interested to know if it is posibble to easily adjust the height of each question field, especially the "FreeText HTML" box, as the spacing seems to be a little overkill.

    When adjusting the DIV tag it seems to cause more issues than it resolved.

    One issue seems to be that txtscroll boxes do not work on ipad/iphone, is this perhaps it uses a form of javascript or flash which is not recognised?  Would also explain why i can not seem to get any txtscroll boxes to work on them, jotform or otherwise...

     

    Thank you for your prompt help with this it has been most helpful and has added to my understanding and limited knowledge on iframes.

     

    Regards

     

    Steve

  • Profile Image
    NeilVicente
    Answered on October 13, 2011 at 10:03 AM

    It is definitely possible to adjust the height of question fields. Just go to Setup & Embed > Preferences > Field Styles then adjust the value of Question Spacing.

    As for adjusting the Free Text, try injecting this custom css code (Preferences > Form Styles > Inject Custom CSS):

    .form-html p {
        margin0;
    }
    Now I don't exactly understand what you mean by text scroll boxes? Are you referring to the scrollbars for the iframed form?
  • Profile Image
    connecter
    Answered on October 13, 2011 at 01:26 PM

    Re last point.. "Text Scroll Barss"  yes I am reffering to the scroll bars in the iframed form, on the "textArea" boxes used in the form.  They work find on standard computer browsers, but when viewing on ipad and iphone the scroll bar does not appear.

    Hope that helps to clarify.

     

    steve

  • Profile Image
    NeilVicente
    Answered on October 13, 2011 at 01:56 PM

    After searching around the web, it seems that the iPhone and iPad's default browser (mobile Safari) does not dislay scrollbars. According to this page, the only way to scroll them is by dragging the content using two fingers.

    Kindly try that solution and see if it helps.