CODEWITHSUNDEEP
htmlcssiframewidgethorizontal-scrolling
James Gooding
James Gooding

Reputation: 3

Iframe not loading fully within horizontal scrolling Div

I am trying to put a iframe within a horizontal scrolling div so that users can scroll across and see the Instagram posts. The issue that I am having with this is when the page loads it cuts off what ever is larger than the div. How do I load the whole iframe within the div without cutting any of the iframe content so that the users may scroll?

#scroll {
  width:100%;
  height:700px;
  margin:0px auto;
  background:#A3CBE0;
  overflow:auto;
  white-space:nowrap;
  box-shadow:0 0 10px #000;
}
<div id="scroll">
  <iframe src="http://snapwidget.com/bd/?h=anVpY2V8aW58MjAwfDEyfDJ8fHllc3w4fG5vbmV8b25TdGFydHxub3xubw==&ve=170515" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="yes" style="border:none; overflow:hidden; width:2520px; height:670px"></iframe>
  <div style="height:1px;width:2520px; background-color:#A3CBE0;">
  </div>
</div>

Heres how the issue looks https://i.sstatic.net/IE33N.jpg

Upvotes: 0

Views: 362

Answers (2)

Stafie Anatolie
Stafie Anatolie

Reputation: 358

You have a max-width: 100% on that iframe somewhere which messes your things up.

Try removing it or, overriding by setting it to default which is max-width: 0

Upvotes: 1

user2755140
user2755140

Reputation: 2027

You have to use JAVASCRIPT for that. Example:

yourIframeId.height = yourIframeId.contentWindow.document.body.scrollHeight + "px";

That will set the height of your iframe accordingly with its content. Same proccess to change the div that wrapped it.

Upvotes: 0

Related Questions