What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    forms on tablet

    Asked by Buzzcom on March 21, 2016 at 02:43 AM

    HI

    I have created forms and they are working really well on desktop and phones. The problem I am having is on the tablet -

    Several issues -
    1 - Forms are embedded and appear in adobe muse but then do not appear live on the tablet -

    example
    http://www.equicomps.com/list.html

    https://form.jotform.co/60788546974879


    2 - Forms are embedded and render correctly on desktop and phone - but on the tablet they don't.

    Example -

    http://www.equicomps.com/rd-qld-f.html

    On the phone the user can scroll across the form. On the tablet the form is stretched to fit the browser and it pushes the other elements on the page into a small area

     

    Please help otherwise I will have to remove the forms from tablet version and do something else.

    Thanks

    JotForm problem adobe muse elements
  • Profile Image
    JotForm Support

    Answered by Chriistian on March 21, 2016 at 04:05 AM

    I would suggest embedding the form to your website using the iFrame embed code to fix the two issues in tablet. Here's a guide that can help: Getting the Form iFrame Code.

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by Buzzcom on March 21, 2016 at 06:11 AM

    HI
    Thanks for your reply. I will try that for the form - but one of them was a grid report - what can I do about that?

    Thanks

  • Profile Image
    JotForm Support

    Answered by beril on March 21, 2016 at 07:38 AM

    On behalf of my colleague, you're most welcome.

    Can you change the code for your grid report as you see below?

     

    <iframe src="https://www.jotform.com/grid/60668566054059" frameborder="0" style="width: 100%; height: 100%; min-height: 500px; border:none;" scrolling="yes"></iframe>

     

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by Buzzcom on March 22, 2016 at 07:41 PM

    HI

    Thanks for your help.
    I have changed the code to above and it does not make any difference.
    Please see example of my website (tablet version)

    http://www.equicomps.com/rd-qld-f.html

     

    I really need to fix this problem. Please help!! Thanks

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 22, 2016 at 07:57 PM

    I checked your website, and since you used Adobe Muse to embed your form, please check if you added resolution for tablets. If the screen resolution is manually set, you can find the sizes here:

    http://stephen.io/mediaqueries/

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Since it is not working only on tablets, I assume that that's the case.

    Please let me know if that helps!

  • Profile Image

    Answered by Buzzcom on March 22, 2016 at 08:19 PM

    Thanks - Does that mean that I have to set the width of the report to the recommended tablet width for the tablet version?

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on March 22, 2016 at 08:31 PM

    As far as I know, reports such as Visual, HTML, Grid reports etc, are not optimized to be responsive. So, if you could adjust the width of the report, probably that could help:

    <iframe src="https://www.jotform.com/grid/60668566054059" frameborder="0" style="width: 80%; height: 100%; min-height: 500px; border:none;" scrolling="yes"></iframe>

  • Profile Image

    Answered by Buzzcom on March 22, 2016 at 09:04 PM

    HI,
    I don't need the grid to be responsive - at the moment it is responsive because it is stretching to fit the width of the browser. I need it to be the normal size and for the user to be able to scoll horizontally. The 80% change did not work either.

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 22, 2016 at 09:39 PM

    I checked the grid report on a tab emulator and I was able to scroll the grid horizontally.

    Unfortunately I do not have a tab to test the grid. Can you send us a screenshot of the grid report from your end? Here's how: How to add screenshots/images to questions to the support forum?

    You can also try setting a fixed on the iFrame with the size of tabs:

    <iframe src="https://www.jotform.com/grid/60668566054059" frameborder="0" style="width: 768px; height: 100%; min-height: 500px; border:none;" scrolling="yes"></iframe>

    Do let us know how it goes.
    Regards.

  • Profile Image

    Answered by Buzzcom on March 24, 2016 at 01:02 AM

    Thanks - yes it works on a tab emulator but not in the real thing - in reality it displays the entire grid report with no scrolling - this means the text is very small and not really readable. I have also tried changing the code as you suggested and that does not work either.

    There must be a piece of code that I can add or change to make it work - to display a grid report on a tablet / iphone is a fairly basic requirement - it works on the mobile phone so I don't understand why it can't work on a tablet / ipad?

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 24, 2016 at 01:24 AM

    I tested it again on an Ipad emulator and I noticed that all the column for the grid was displayed so there is no need for scrolling. However, the grid text displayed is small.

     

    Can you try to set the iFrame code min-width and max-width and see if it will help? 

    <iframe src="https://www.jotform.com/grid/60668566054059" frameborder="0" style="min-width: 768px !important; max-width:80% !important; height: 100%; min-height: 500px; border:none;" scrolling="yes"></iframe>

     

     

  • Profile Image

    Answered by Buzzcom on March 24, 2016 at 02:02 AM

    Hi,
    I changed the code and it still looks the same.

  • Profile Image
    JotForm Support

    Answered by beril on March 24, 2016 at 03:55 AM

    I hope it will work at this time. =)

    We would apprecıate it if you could change the code as you see below.

    <div style="overflow:auto;-webkit-overflow-scrolling:touch; width:90%;margin:5px 5%;">

    <iframe src="https://www.jotform.com/grid/60668566054059" frameborder="0" style="width: 100%; height: 100%; min-height: 400px; border:none;" scrolling="auto"></iframe>

    </div>

    If it doesn't work please let us know. We will be happy to assist you.