CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
jimfromthegym - Jim Mackin
jimfromthegym - Jim Mackin

Reputation: 107

How can I force an iframe to resize to fit the embedded document?

I have an iframe that has quite a bit of white space tacked onto the end of visible elements. In fact, I know that the iframe is loading the size of all my elements including hidden elements. These elements were meant to be hidden until some knockout questions are answered, at which point the iframe should resize accordingly.

The other battle I am fighting with this is the fact that I am also having to deal with two scroll bars, one for the iframe, and of course the web page scroll bar. This is just very tacky and not very user friendly.

This is a problem I inherited, so I am hoping for a solution involving the iframe. I am also willing to explore other solutions as maybe this is not the most appropriate as it is.

Upvotes: 2

Views: 1070

Answers (3)

Arnold Daniels
Arnold Daniels

Reputation: 16573

You might update the height of the <iframe> from the framed page using JavaScript after a new element is shown.

function resizeParent() {
    if (!window.parent) return;

    var height = $(document).height();
    $(window.parent.document).find('iframe').height(height);
}

Demo

Source of framed page

Note, this will only work if both pages are loaded from the same domain.

Upvotes: 1

seanlevan
seanlevan

Reputation: 1415

Use both the inline style attribute style="overflow:hidden;" as well as the attribute scrolling="no". overflow:hidden is the proper HTML5 counterpart, so it's best to mix both.

Edit: In fact, if it is suited for your case, try using the iframe seamless boolean attribute. It practically makes the iframe styled as if it's part of the containing document, including no borders or scrollbars. I recommend it because it's like a one-stop for what you need to accomplish, and it does the work for you. You can try a combination of all the three attributes I recommended for ideal browser compatibility.

Upvotes: 1

Stack Overflown
Stack Overflown

Reputation: 702

To get rid of scroll bars, try adding scrolling="no" to the iframe. HTML iframe - disable scroll

Upvotes: 5

Related Questions