CODEWITHSUNDEEP
iosionic-frameworkiframe
Ajit
Ajit

Reputation: 51

Iframe automatically goes full screen using Ionic 3.9.2 on iOS

Iframe automatically goes full screen using Ionic 3.9.2 on iOS.

I've tried removing all the fullscreen tags. I notice that it is not happening anywhere else. Only happens on iOS. On other devices, I have to manually make it full screen.

Why does Iframe automatically go full screen on iOS? 

<iframe src="https://d1mlukbqb3dh9w.cloudfront.net/PortraitCourse/Module01/Module01Section1/story.html" height="655" width="100%"></iframe>

Upvotes: 4

Views: 711

Answers (1)

Filippo Possenti
Filippo Possenti

Reputation: 1410

A while ago I would have been able to provide you with a spot-on answer. Unfortunately I no longer have access to the resources I would need to do so... meaning my answer won't be a complete solution.

IFRAME, on iOS, works slightly differently than on Android. Getting an IFRAME to take only the height you want is not simply a matter of setting the HEIGHT property on the tag as the rendering engine works differently. You'll have to play around with CSS both in the container of the tag and in the contents of the body itself.

Try proceeding as follows:

  1. prepare a mock target page that doesn't take all the height, make its background red and see how much space it takes
  2. make the mock page longer than the height of the screen by adding lots of text and images to it and observe the change
  3. wrap the IFRAME in a DIV and set the style=height: xxx of the div, as well as its overflow.
  4. wrap the contents of the mock page in a div, setting its height, overflow, position and display style properties to control its appearance.
  5. repeat step (4) with both the HTML and BODY tags of the mock page.

Playing with these in real-time using Safari to alter their values will prove most useful. It was to me at least, when I had the problem over an year ago.

Upvotes: 2

Related Questions