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

  • joim
    Asked on January 18, 2015 at 7: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

    Jotform Thread 498178 Screenshot
    Page URL: http://art.imj.ch/Kontakt.htm
  • Ben
    Replied on January 18, 2015 at 8: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

  • joim
    Replied on January 18, 2015 at 2: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" onDISABLEDload="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

  • jonathan
    Replied on January 18, 2015 at 3: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.