forms on tablet

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

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.

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

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.

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

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!

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

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>

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.

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.

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?

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>

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

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.