Cross-browser Iframe Height

**Rain Lover** · 03-30-2015, 05:06 AM

I have a Google form embedded into my blog:
http://tmblrlabs.tumblr.com/contact
Simplified demo:
https://jsfiddle.net/kexgcd0a/

It looks ideal on Chrome — neither an extra scrollbar nor unwanted space below the iframe. But that's not true for other browsers, e.g. in Firefox there's an extra scrollbar. What should I do so it looks good on all browsers?

**molendijk** · 03-30-2015, 01:50 PM

Change the iframe's height:

Code:

<iframe src="https://docs.google.com/forms/d/1QICJwSJNEjSAGaVz7mWxq0FnrfDMZqOqMn0_iXM0ph8/viewform?embedded=true" style="width: 100%; height: 655px; border: 0; " ></iframe>

**Rain Lover** · 03-31-2015, 06:08 AM

Originally Posted by molendijk

Change the iframe's height:

Code:

<iframe src="https://docs.google.com/forms/d/1QICJwSJNEjSAGaVz7mWxq0FnrfDMZqOqMn0_iXM0ph8/viewform?embedded=true" style="width: 100%; height: 655px; border: 0; " ></iframe>

That leaves unwanted space below the iframe in Chrome and some other browsers.

**Beverleyh** · 03-31-2015, 07:10 AM

As long as there's enough space to show the contents, what about adding scrolling="no" to the iframe tag?

**Rain Lover** · 03-31-2015, 07:26 AM

Originally Posted by Beverleyh

As long as there's enough space to show the contents, what about adding scrolling="no" to the iframe tag?

The point is enough space differs from browser to browser. In addition, Google might change the form style and size in the future, which is out of my control.

**Beverleyh** · 03-31-2015, 10:52 AM

In addition, Google might change the form style and size in the future, which is out of my control

True, but then using a fixed height (as you currently are) will create the same limitations.

These are some ideas;

1 - Use "browser hacks" - CSS or JS - to target the browsers and provide specific heights for each (but then, like you say, you can't control what Google will do with their form in the future, so you'll have to keep an eye on things and edit the height again when necessary - nothing you wouldn't already be doing though with your existing CSS height)

2 - Use an iframe auto height script - there are plugins for jQuery and I believe there is one in the DD library too (having never used a tumblr blog, I don't know if you are able to use 3rd party scripts though)

3 - Set a big enough iframe height (with or without scrolling="no" too) so that the content can be seen using today's Google form layout, and accept that browsers render things slightly differently (additional thoughts as point 1)

4 - Use your own form rather than Google's so that you can control layout (don't know if this is possible with tumblr)

5 - Set up your own blog, on your own web host, and be in control of everything.

**Rain Lover** · 03-31-2015, 11:38 AM

Thanks for the suggestions!

**mlegg** · 03-31-2015, 05:45 PM

How about this?
http://jsfiddle.net/60xs8bro/http://jsfiddle.net/60xs8bro/

html

Code:

<iframe src="http://www.cnn.com/" class="iframe"></iframe>

css

Code:

html, body
{
    height: 100%;
    overflow: hidden;
}
.iframe
{
    position:absolute;
    top:-70px;
    left:0;
    width:100%;
    height:calc(100% + 70px);
}