1,105,417 Community Members

control iframe content width to avoid horizontal scroll

Member Avatar
rori
Newbie Poster
24 posts since Dec 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi,

I have a page on my website where I put an iframe and display inside it another website, something like this:

<iframe frameborder="0" height="100%" scrolling="yes" src="http://www.another-website.com/" style="overflow: scroll; min-height: 600px;" width="100%"></iframe>

My problem is that my page have a fixed width of for example 800px which the iframe width is 100% of this width, but some external websites I put inside the iframe have a wider fixed width than 600, for example if the external website have the width of 1000px then my iframe will have a horizontal scroll.

I don't want the horizontal scroll to appear and at the same time I want the iframe to show the whole width of the external website.

Is there a way that I can control the width of the external website and make it 100% of the width of my iframe instead of their fixed 1000px for example?

I don't think I can but I thought I would ask anyways maybe it's possible!

Thanks for your time.

Member Avatar
Agent Cosmic
Junior Poster in Training
51 posts since Aug 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Maybe you could try something like this.

var frame = document.getElementById(Id of frame).contentDocument.body;
if(frame.offsetWidth > 800){
frame.style.width = '800px';
}

Member Avatar
fxm
Posting Pro
591 posts since Apr 2010
Reputation Points: 23 [?]
Q&As Helped to Solve: 75 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi,

I don't want the horizontal scroll to appear and at the same time I want the iframe to show the whole width of the external website.

These attributes

width="1000px" style="overflow-x: hidden; overflow-y: auto;"

come fairly close to what you want (in all current browsers AFAICT).

You may be able to adjust the width dynamically; I don't know of any cross-browser way to move the y-scrollbar to the left of the iframe.

Member Avatar
fxm
Posting Pro
591 posts since Apr 2010
Reputation Points: 23 [?]
Q&As Helped to Solve: 75 [?]
Skill Endorsements: 0 [?]
 
0
 

adjust the width dynamically

This

<script type='text/javascript'>
    function resizeIframe(ifn) {
        ifn.style.width = (20+ifn.contentWindow.document.body.scrollWidth) + 'px';
    }
</script>
<body onload="resizeIframe(document.getElementById('resizeme'))">
<iframe id="resizeme" src="......" frameborder="0" style="height:400px; overflow-x: hidden; overflow-y: auto;"></iframe>

is crude but effective.

When src= is wide enough there will be a polite horizontal scrollbar at the bottom of the page (instead of a rude one at the bottom of the iframe).

I still haven't found an effective way to move the y-scrollbar; it looks rather ugly in its default position when src= is narrow.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article