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?
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).
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!