I have a Google form embedded into my blog:
http://tmblrlabs.tumblr.com/contact
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?
You could increase the height a bit. Seems the box shadow is the issue, though. Maybe remove the box shadow from the form and add it to the iframe instead? Requires a bit of tweaking, admittedly.
You could increase the height a bit.
That solves the problem in Firefox, but leaves unwanted space in Chrome.
Maybe remove the box shadow from the form and add it to the iframe instead?
I have no control on the iframe content, as it’s hosted on Google.
Your HTML has two doctypes. Only one is allowed. The HTML needs validating.
Excessive padding and margin values occupy too much height inside the container; thus trigger the scrollbar.
.ss-top-of-page {
margin-bottom: 3rem;
padding-top: 4rem;
}
Here’s a simplified demo:
You’ve assigned a height of 625px to the iframe. Give the iframe a height of at least 655px and you should see no scroll bar. I don’t anyway.
That solves the problem in Firefox, but leaves unwanted space in Chrome.
Does Chrome use a smaller font-size? If so, because of the fixed height, I’m not aware of a magic fix.
EDIT: The difference seems to be within the “message” box. FF renders it taller than Chrome. BTW - might need to make that a little taller than 655px, like maybe 665px. There is a “This is a required question” line that I didn’t see earlier beneath the message box if it is left empty.
As you have no access to the iframe code then there is little you can do apart from apply a larger height than needed.
The textarea is 26px taller in Firefox because the height is applied by the html ‘rows’ attribute which is not the same value cross browser. CSS ‘height’ should be used instead. Also the line-height is not the same in Firefox and Chrome as it has not been set explicitly and most of the elements will be at least 1px out.
You also get a scrollbar in chrome when the form error message appears so you may want a greater height anyway.
Or you could try using JS iframe resizer script which should solve the height issue on first load (it probably won’t account for an error message popping up though).
Seems to be the best choice. Thanks for the answer! 
You could always use relative positioning and 100% height on the iframe. That will at least scale up if the screen if large enough, and you can use min-height to fix any issues on a smalled screen.
<style>
*{
margin:0; padding:0;
}
html,body{
height: 100%;
}
iframe{
height: 100%;
position: relative;
}
</style>
It doesn’t seem to work. Please try on the simplified demo.
If you have nothing else on the page then it should work (I was assuming the form was in the middle of an existing page).
You would need to remove the div (or give that height:100% also) as that will not pass on the height to the iframe.
Correct assumption. It’s on a Tumblr blog where you are allowed to embed something into the page body.
Hi there Rain Lover,
here is a possible alternative method…
[code]
untitled document body { margin:10px 0; } #frame-holder { position:relative; max-width:400px; height:470px; border:1px solid #ccc; border-radius:10px; margin:auto; overflow:hidden; box-shadow:0px 0px 10px rgba(0,0,0,0.3); } #frame-holder iframe { position:absolute; top:-50px; left:-40px; width:154%; height:700px; border:0; } #frame-holder div { bottom:0; position:absolute; width:100%; height:21px; background-color:#fff; }Beautiful demo! Thanks! 
Yes, it IS a nice demo, but it reveals the same problem as the other fixed height solutions. Notice that the line at the bottom of the iframe is overflowing the iframe box.
Paul’s solution to assign extra height still seems to be the best overall.
Agreed!
Hi there Rain Lover,
Have you considered the possibility of not using the iframe altogether?
Check out the contents of this zip file...
rain-lover-form.zip (13.4 KB)
Yes, I have. But this solution isn’t reliable as Google changes its form tags attributes and children once in a while and then your custom Google form stops working. I’ve already experienced this problem.
Thanks for your time, anyway!