Fixed width of the grid report changes when checked from mobile device.

Hi,

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!

Matt

Hi Matt,

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.

Thank you!

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!

Hello getedgeucated,

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.

Thank you!

Hello,

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>
</div>

Please let me know if it doesn't work out for you.

Thanks!