How do I get my form to display correctly on Mobilphone?

  • Profile Image
    joim
    Asked on January 18, 2015 at 07:04 AM

    The issue on my Desktop Monitor looks all good, but if I open my forms in a mobile phone I don't see my submit button.

    The lower part is cut off.

    I tried to enlarge the iFrame hight: 2200px but on Mobilphone still cut of the lower part!

     

    I am looking forward for your help and say Thank You

    joim

  • Profile Image
    Ben
    Answered on January 18, 2015 at 08:23 AM

    Hi,

    It seems that it is caused by the div into which the jotform is implemented by being set to hide all extra space that the jotform would take.

    <div style="position: absolute; left: -26px; top: 688px; width: 760px; height: 1007px; overflow: hidden;">

    As you can see it will only allow 1007px of height to be in it and will hide the rest of it as if it does not exist.

    You could change that to:

    <div style="position: absolute; left: -26px; top: 688px; width: 760px; height: 1007px; overflow-x: hidden; overflow-y: auto;">

    Using auto on overflow-y will create the scrollbar if needed and will not show it if it is not needed.

    Alternative would be to change the height of the div instead.

    Do let us know how it goes.

    Best Regards,
    Ben

  • Profile Image
    joim
    Answered on January 18, 2015 at 02:30 PM

    Hello Ben

    First I’ll Thank u for ur fast replay :O)

    I have changed the code too:

    <div style="position: absolute; left: -26px; top: 688px; width: 760px; height: 1007px; overflow-x: hidden; overflow-y: auto;">

    But on Mobile phone still shows not right:
    And on the Desktop Display shows me now the scroll bar:

    Well I did made several Testing Page with Dreamweaver MX, I get the Source Code and download the separate .css & .js  files and after Upload it was the same display matter on the Mobil phone screen.

    So I going Back on Xara Designer Pro and tried with iFrame add this and then I changed the height:2200px and allow the scrolling Yes

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


    Any other solution for this matter?

    Best regarding’s joim

  • Profile Image
    jonathan
    Answered on January 18, 2015 at 03:15 PM

    Hi Joim,

    We have a user guide on how to add form to Xara.

    user guide: http://www.jotform.com/help/78-Adding-forms-to-Xara-6

    and http://www.jotform.com/help/175-Changing-Height-in-Xara-7

    Have you tried following the user guide instead?

    Hope this help. Please let us know if issue remains.

    Thanks.