0

I'm creating a site using Angular 2, I successfully included a Google Form inside using an iFrame. It's working perfectly on every browser I tested (Firefox, Opera, Chrome) on my laptop (linux) and on my phone (android).

However, it's not working on iOS. The iframe is diplayed and can be scrolled (screenshot) but it's too large for the screen, it's not responsive at all. Here is what it looks like on my tablet (android).

I tried fixing it by looking at a dozen stackoverflow answers, but so far I've only managed to make the iframe scrollable by adding the last line of CSS. It's been a month now that I'm stuck with the iframe like this and I'm becoming a bit desperate!

Setting the width of the iframe manually to an absolute value has no effect on iOS (but it does have one on my phone).

This is the CSS of the div that contains the iframe:

display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;

and this is the CSS of the iframe itself:

max-width: 100%;
min-width: 100%;
height: 100%;

Here is the HTML part containing the iframe:

<div class="frame-flex">
    <iframe src="https://docs.google.com/forms/whatever/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>

I must add that I'm a beginner in HTML/CSS (in case you're wondering why the CSS is ugly). Thanks for your time anyway!

sheep
  • 35
  • 1
  • 6

1 Answers1

0

PROBLEM: Google is aware of google forms not being responsive on IOS: https://productforums.google.com/forum/#!topic/docs/8UG9CQmgzY0

Essentially, the embedded google form works fine on desktop but has no scrolling options on mobile. On my IOS 9 tests on ipad, Safari would also crash. Bootstrap4 and Angular tests I conducted found that embedded iframe google forms were also non responsive and no scroll bar.

WORKAROUND: You can still use the following on IOS if your web page does not use ONE OF THE FRAMEWORKS ABOVE (this also allows for a top navigation bar):

<style>
#all{
        width:100%;
        height: 100%;
        float:none;
        text-align:center;
}
</style>

<div id="all">

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf-TDDGGzhgIpQLSfwA7QGFQLSf9IpQLSf/viewform" frameborder="0" marginheight="0" marginwidth="0" ></iframe>

</div>

FINALLY (though not directly related to google forms): Check these stackoverflow links:

how to properly display an iFrame in mobile safari

How to get an IFrame to be responsive in iOS Safari?

thrave
  • 111
  • 1
  • 11