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.
Fixed width of the grid report changes when checked from mobile device.Asked by getedgeucated on September 06, 2014 at 04:40 PM
I am trying to embed a report of the "Upload a File" form on my mobile "Tutor Dashboard", but the defined width I'm setting for the iFrame (either in % or px) isn't being recognized by mobile devices. You can see what I'm talking about here: http://m.getedgeucated.com/sshs/dashboard/fileuploads.html
If you open the page on a computer, you'll notice the iFrame is centered and has a width of 300px (about the size of the iPhone's screen width. But on the iPhone, it opens at a different width, and when you try to enlarge the image, you can't see the full thing.
Any thoughts or suggestions are greatly appreciated!
I am able to see that;
Please try the following set of widths:
<iframe src="https://www.jotform.com/grid/40837260616050" frameborder="0" style="width: 30%; height: 100%; min-height: 400px; border:none;" scrolling="auto"></iframe>
<iframe src="https://www.jotform.com/grid/40837260616050" frameborder="0" width="300px" style="width: 300px; height: 100%; min-height: 400px; border:none;" scrolling="auto"></iframe>
Please update us here for the results.
Neither one of those worked. It shows the correct width on my computer, but the iPhone's browser doesn't seem to recognize the specified width. Which is strange because Safari on my Mac shows the right width.
Thanks for your help!
I did check your web page where you have embedded your report and found that it does display the correct width on computer. 100 px width is too small but it does display the images in the grid. On my checking, if you click on any of the images it does not display the complete image. Please check the screenshot below:
When I checked your web page in my iPhone device, it seems to be not displaying in report with correct width you have set. The width of the report iFrame is increased. Please check the screenshot below of my iPhone:
I am not sure what is causing this behavior. Have you tried to embed your grid report using the width in percentage as suggested by my colleague? I would suggest you to embed it with the width in percentage and we will take a look.
I am anyway reporting this to our back end team. We will get back to you as soon as we have any update from them.
As my research points out, this is a know issue with iOS. So we need a tiny hack to make it much better. This is the code:
<div style="overflow:auto;-webkit-overflow-scrolling:touch;width:90%;margin:5px 5%;">
<iframe src="//www.jotform.com/grid/40837260616050" style="width: 100%; height: 100%; min-height: 400px; border:none;" scrolling="auto" frameborder="0"></iframe>
Please let me know if it doesn't work out for you.