Question

I have an HTML file as follows;

<table height="100%" cellspacing="0" cellpadding="0" border="0" width="646" class="data border">
            <tbody>
              <tr>
                <td valign="top" class="noPad">
                    <iframe height="100%" frameborder="0" width="100%" scrolling="no" name="studentFrame" src="delete2.html"></iframe>
                </td>
            </tr>
        </tbody>
</table>

The iframe page delete2.html has a table of width = 846 i.e. it is more than the containing td width

So this only shows around 646 width of the iframe content on page load and rest scrolls..

But on the iPad, the complete 846px of iframe content gets displayed and it kind of appears to flow outside the table width..so it appears broken..

How can I fix this issue?

Answer 1

Starting in version 4.2.1 of Safari iOS, and still going as of 4.3.3, the entire content of an iFrame is forcibly shown. If your iFrame’s content is in the same security sandbox as the outer page, you can surround the iframe with a div tag and use that to do the scrolling.

This fiddle doesn’t work because of security sandbox restrictions, but it should work find for you if both pages have the same domain: iPad iFrame single finger scrolling