0

I am using an iframe which is displaying a list, the list is quite tall vertically. I have set the iframe's height to be 600px, so on desktop it displays that height and one can scroll down through the content.

The problem is, when viewing my site on mobile, the iframe gets expanded to its full height (no longer 600px with scrolling).

My iframe:

<iframe src='url' width='360' height='600'></iframe>

my css:

iframe {
    border: 1px solid black
    padding: 3px;
    height: 600px;
    overflow: scroll;
}

I have tried surrounding my iframe with a div as follows, referenced from this question, which is a slightly related problem, but it still expands.

<div style="overflow:auto; -webkit-overflow-scrolling:touch">
    <iframe src='url' width='360' height='600'></iframe>
</div>

How can I prevent the iframe from expanding on mobile? Is this even possible?

Community
  • 1
  • 1
Noam Hacker
  • 4,671
  • 7
  • 34
  • 55
  • how can you confirm that it's > 600px :) I mean 600px is pretty big height? :) and except from that in your element definition, it's really good to define unit of width and height – Marko Mackic Jun 19 '16 at 22:10
  • @MarkoMackic thanks, i'll try explicitly stating the unit – Noam Hacker Jun 20 '16 at 02:03

1 Answers1

0

So the dimensions need to be added to the surrounding div as well:

<div style="overflow:auto; -webkit-overflow-scrolling:touch; width:360px; height:600px;">
    <iframe src='url' width='360' height='600'></iframe>
</div>

And it will make more sense to move the border css to the div rather than the iframe.

Noam Hacker
  • 4,671
  • 7
  • 34
  • 55