disable iframe auto resize

Question

I am working with a webpage with an iframe within it. The iframe has a fair amount of data in it and every-time it loads its height expands to the extent of the content within. However this puts my page out. Is there anyway to lock the height of the iframe and allow the user too scroll through the content??

Ok so that works. However does not within mobile site? Hmmmm... — Christopher, Aug 16 '11 at 01:47

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

Watch out for iOS. Its kinda screws everything up:

http://salomvary.github.io/iframe-resize-ios-safari.html

how to properly display an iFrame in mobile safari

edited May 23 '17 at 12:08

Community

1
1

answered Oct 13 '14 at 19:09

Simon_Weaver

140,023
84
646
689

seems to resize iframe to full page size no matter what i do. lol – filthy_wizard Jul 27 '18 at 13:55
@filthy_wizard ya I gave up. Fortunately what I was doing was only for testing purposes. Will be interesting so see if they change something in future as embedded components become a bigger thing (eg Angular elements) – Simon_Weaver Jul 27 '18 at 18:00
Although come to think of it maybe they don’t use iframe – Simon_Weaver Jul 27 '18 at 18:01

score 2 · Accepted Answer · answered Aug 16 '11 at 01:40

Hmm, weird... do you have an example link of this issue?

When I try a simple iframe: http://jsfiddle.net/mP6wT/5/

<iframe src="http://example.org/"></iframe>

It seems to be sized pretty small by default, and scrolls in Chrome/FF/Win... Rather than adjusting to the height...

But at any rate, you should be able to lock the height with CSS: http://jsfiddle.net/mP6wT/7/

<iframe src="http://example.org/" style="height:400px;"></iframe>

score 1 · Answer 3 · answered Aug 16 '11 at 01:39

1

Give the iframe a fixed height and scroll auto and you should be good.

<iframe height="100px" scroll="auto"></iframe>

Note that 100px is just an example, you might want to choose a height that suits you.

answered Aug 16 '11 at 01:39

legendofawesomeness

2,901
2
19
32

score 0 · Answer 4 · answered Aug 16 '11 at 01:39

Your iframe probably has height: 100%; set or even the height is being set via script of some sort. Technically you can set the height <iframe height="300"></iframe> or <ifreame style="height: 300px;"></iframe> = height of 300px.

Since you didn't provide any code, I cannot help you any further :( Provide your live example or code, then we can help you better. But generally, either try manually setting the iframes height, re-check your pages code.. maybe some script is setting the height or maybe the code inside the iframe..

disable iframe auto resize

4 Answers4

Linked