Iframe Behaving differently in different browsers and with varying screen size

Hello , i am trying to put a Google form on a webpage using an iframe ,i have disabled the scrolling feature and adjusting the height of iframe in a manner so it just accommodate the submit button of the Google Form , the problem is that on different browsers and also depending on the size of the screen some part of the form from the bottom crops up like the submit button wont be visible in Mozilla and when i zoom in or zoom out in the browser window sometime it shows up and some time is completely hide up , any resolution for this , i have searched internet and found somewhere that by using CSS we can get resolve the issue , so iframe wont behave differently in different browsers and different screen resolutions

We can’t really offer advice without seeing your code. A link to your site would probably be the easiest way to provide it.

Here is the page where i have posted my iframe to display google form and which is not displaying properly in multiple browsers , today i checked in IE and it was looking like a total blunder half of the google form was moved in middle of the screen , kindly help with the issue

http://www.savemorenow.in/p/claim-recharge.html

Hi,

The page is looking the same in ie11 as it is in Firefox so you again need to be clear in which browser and which version you are having a problem with?

I can see that in IE8 the form is broken but you seem to be using jquery 2 anyway which isn’t supported in IE8 so I guess you are not supporting IE8?

One of the problems in IE8 is that the form you are using has been sized using the rem unit but with no fallback. IE8 doesn’t understand the rem unit so the auto margins in the form itself are not applied. That means that when you apply your 116px negative margin to your iframe then IE8 gets 116px too far to the left because it was already flush left anyway and half the form disappears.

If you don’t have access to the coding in the actual form and apply fallbacks for IE8 then you could use the same process in your iframe and apply the negative margin using rems and that will stop IE8 from applying it.

e.g.

<div style="border: none; margin: 0px auto; max-width: 500px; overflow: hidden;">
<iframe scrolling="no" src="https://docs.google.com/forms/d/16H0cGPdgPsbXvfQAXguYOprj2gNZzI1SXhGASITFPew/viewform?embedded=true" style="border: 0px none; height: 1655px; margin:0rem -25px 0rem -116px; width: 930px;">

i,e. his part:

style="border: 0px none; height: 1655px; margin:0rem -25px 0rem -116px; width: 930px;

Of course that won’t help with any js errors that arise from the use of jquery2.

Thanks for the reply , i have checked my Firefox Version just Now and it is showing Version 33.0.2 which is upto date version , can you help me with some code which should work for all browsers , i am not much expert in coding part

Hi,

The main problem is that you are trying to show only part of the form and to do that you are guessing at a width and height to show only the bits that you want but that will only work for your browser as all browsers render text and fonts at different sizes and to expect a whole page to be exact in various browsers is asking a lot especially when you have no control over the css/and html in the iframe.

What you should do is set the iframe scrolling attribute to auto and set a width and height that fits in your container so that the scrollbar shows and is not hidden outside. Then remove the negative margins. of course that will leave all of the form visible including its shadows and footer which you can’t do anything about unless you have access to the css on the iframe itself.

You may need to re-think this :smile:

You could probably rub out the shadows by laying elements over the top.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.iframe-holder {
	margin:0 auto;
	max-width: 600px;
	height:700px;
	position:relative;
	overflow:hidden;
}
.iframe-holder iframe {
	border:0px none;
	height:100%;
	width: 625px;
	margin:0 0 0 -25px;
}
.iframe-holder:before, .iframe-holder:after {
	content:" ";
	position:absolute;
	right:15px;
	left:0;
	top:0;
	height:15px;
	background:#fff;
	z-index:2;
}
.iframe-holder:after {
	top:auto;
	bottom:0;
}
.iframe-holder div {
	position:absolute;
	right:15px;
	top:0;
	bottom:0;
	width:15px;
	background:#fff;
	z-index:2;
}
</style>

<!--[if lte IE 8]>
<style>
.iframe-holder iframe {
	width: 600px;
	margin:0;
}
.iframe-holder:after,
.iframe-holder:before,
.iframe-holder div{display:none}
</style>
<![endif]-->
</head>

<body>
<div class="iframe-holder">
		<div></div>
		<iframe scrolling="auto" src="https://docs.google.com/forms/d/16H0cGPdgPsbXvfQAXguYOprj2gNZzI1SXhGASITFPew/viewform?embedded=true"> </iframe>
</div>
</body>
</html>

That should work in IE9+ and the conditional comments allow the form to be usable in IE8.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.