I have a google spreadsheet embedded onto a website with
<iframe src="https://docs.google.com/spreadsheets/SPREADSHEETURL&single=true&widget=true&headers=false" style="display: block; width: 100%; height: 100%;"></iframe>
But I want the table to be expanded vertically be default. You can only see the lower part of the spreadsheet by scrolling, but I want it to be default to show the whole spreadsheet.
BONUS:
I also want to be able to remove the part at the top of the spreadsheet that says the spreadsheet name.
Thanks in advance.
EDIT:
I may have found what I was looking for here
<iframe width="100%" height="160" frameborder="0" scrolling="yes" src="https://docs.google.com/spreadsheets/SPREADSHEETURL&single=true&widget=false&chrome=false" allowfullscreen=""></iframe>
Which works partially, but the scrolling problem is still there. Scrolling is the only way to see the lower portion of the spreadsheet. Also, it takes a long time to update on the website, but that may be Google's problem.
Found it out, I must've been overthinking it.
<iframe width="100%" height="1600" frameborder="0" scrolling="yes" src="https://docs.google.com/spreadsheets/SPREADSHEETURL&single=true&widget=false&chrome=false" allowfullscreen=""></iframe>
I just changed the height parameter to whatever I need.
This site helped me out a lot.
Related
I am using an "emailmeform" in an iframe for a contacts page and the background won't go transparent. I have added allowtransparency="true" to the iframe and it's doing nothing.
I know I should add <body style="background:transparent"> into the source to make this normally work but I have the exact same iframe on another page and the transparency works, but trying it on this new page with the same code for some reason doesn't work.
Here's the bog standard iframe code, I just can't see what's going wrong.
<iframe width="100%" height="600" allowtransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://www.emailmeform.com/builder/embed/Mnc79QelZ4v8r">
</iframe>
allowtransparency is NOT in <iframe> specification, thus it is doing nothing. This keyword support is removed since IE9.
background: transparent is doing nothing either. It depends on how browser renders this transparency. In short, avoid using transparent background.
The transparent keyword maps to rgb(0,0,0).
Sidenote: However, similar parameter exists in XUL, but this does not apply to your case.
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
I have a long discussion with one person i know.
He insists on using iframes to embed YouTube videos as:
<iframe style=”width: 560px; height: 315px; border: none;” src=”http://www.youtube.com/embed/bla-bla-bla?rel=0″></iframe>
that does work for some videos but not for all.
Youtube provides the following code to embed:
<iframe src="http://www.youtube.com/embed/bla-bla-bla?rel=0" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
which obviously works fine.
I was trying to find in specification of iframe if width and height are required. And what happens when they are not provided. But could not quite find the information.
Can someone please help me and explain why the first variant does not work always, and one, as far as i understand, is better of with the second variant?
EDIT1:
so the right answer is below. I just want to comment how i got those wrong curly symbols. The guidelines of one WordPress-based site give users these code snippets. That particular web-site (or it's css; or wordpress in general) don't distinguish between curly and straight quotes, always showing curly. THus when user copy-paste the code - it does not work.
Per our discussion in the comments, the problem was caused by the curly quotes in the first example:
<iframe style=”width: 560px; height: 315px; border: none;”
src=”http://www.youtube.com/embed/bla-bla-bla?rel=0″></iframe>
Changing to straight quotes fixed it:
<iframe style="width: 560px; height: 315px; border: none;"
src="http://www.youtube.com/embed/bla-bla-bla?rel=0"></iframe>
It's helpful to validate your HTML using the W3C Validation Service. That would catch this error and many others.
My guess is that youtube accesses the height and width properties using window.frameElement
https://developer.mozilla.org/en-US/docs/Web/API/window.frameElement
They probably do this to adjust the video quality or something.
Those will not be present if you set the width and height using css, and they may encounter an error in their code and not show the video.
So the answer is, no those attributes are not requried, however in this scenario they seem to be.
I can only tell you for sure if you have an example.
bug here: https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D
just encountered this problem, streaking up my screen on chrome, but not on firefox, or IE. anyone on a mac seen this?
Removing the background-color:
body {
...
background-color: #fff;
}
in the CSS of the HTML document which is rendered into the iFrame did solve the issue in my case.
After one full day trying to solve this bug I can confirm that there's another workaround and it's probably an "easier" one.
In my case these solutions didn't work. In fact, applying them to the examples in the issue tracker of chrome (look for them here http://code.google.com/p/chromium/issues/detail?id=143354 ) didn't actually solve the problem. (PS: the problem is usually based on using the scrollbar and SOMETIMES in using the mouse scrolling).
Therefore I did some searches for services the worked and guess what:
Visual Website optimizer didn't have this problem
and they are indeed using and iframe, good job guys!
So, what solution did they use?
They used a fixed height.
(yup!)
So, take the example in the chrome issue 143354 (the one with the red background, ok?)
and change the code from
<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" frameborder="0" src="./page2.html"></iframe>
</body>
</html>
to
<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" src="./page2.html" style="margin: 0px !important; padding: 0px !important; height: 286px; "></iframe>
</body>
</html>
This will solve the problem of red lines.
To fix my webapp I needed to calculate the height on every window resize, put those margin/padding , and avoiding relative positioning on the iframe, nothing more.
Hope it helped (It almost drew me out of my mind to solve it)
Still same problem here using Windows 7 and chrome 22.0.1229.94 except white lines appear when scrolling down, not scrolling up.
I've tried all solutions proposed but nothing seems to fix it.
Setting -webkit-margin-after and -webkit-margin-before make lines disappear when scrolling down but now it appear when scrolling up.
In chrome group forum, they say it should be fixed in 23 series but who knows...
Finally, can find a workaround (not so cool but works) inspired by some read.
Here it is:
$(document).ready(function(){
//to fix scrolling bug in iframe for chrome (issue: http://code.google.com/p/chromium/issues/detail?id=140447)
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
var ibody = document.getElementsByTagName('body')[0];
window.onscroll = function(e) {
ibody.style.visibility='hidden';
ibody.offsetHeight;
ibody.style.visibility='visible';
}
}
});
Had the same issue. Resolved by setting position style to relative:
<iframe ... style="position: relative"></iframe>
The issue causing these visual anomalies has been confirmed fixed in the latest canary build of chrome (>= 25.0.1365.1 canary), so hopefully the chrome stable channel should have the fix fairly soon.
I found out that it's possible to workaround this Chrome bug by shaking up the DOM a bit.
E.g. this was causing the issue:
<h1>foobar</h1>
<iframe src="..." style="border:none"></iframe>
... but replacing the H1 with SPAN fixed it:
<span style="display:block">foobar</span>
<iframe src="..." style="border:none"></iframe>
I ran in to a similar problem and was able to fix it in my case by setting -webkit-margin-after and -webkit-margin-before to 0.
<h1 style="-webkit-margin-after:0; -webkit-margin-before:0;">foobar</h1>
<iframe src="..."></iframe>
Also, I initially tried replacing the H1 with a span as in Jiri's example, but the lines came back when I tried to apply a top and bottom margin of .2em to the span. Removing margins cleaned things up (I just used line-height to create some space around the header)
i have an iframe nested inside another iframe, and for both iframes i have these attributes:
frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no"
Ive also tried:
style="border: 0px; margin: 0px; padding: 0px;"
It seems that no matter what I try, the border of the inner iframe keeps showing, as well as the padding within the inner iframe. This is also only the case for IE (v. 8), for firefox it works fine and shows no borders.
Is there any way to get rid of this?
Capitalize the letter B in "frameborder"
<frameBorder="0" ... >
It's an IE thing...
use frameborder="0" attribute:
<iframe frameborder="0" src="..." />
Unfortunately, do not know, how to set this using CSS.
I've spent so much time busting my head over this one :)
If you have not defined any values for the DIV in which your IFRAME is located, a border appears by default. I usually put my IFRAMEs in the body section of a separate HTML file. I add this line of code in my CSS file and boom! Problem solved.
body {
padding:0;
margin:0;
}
I want to remove the horizontal scrollbar in my iframe. I just need a vertical scrollbar to view the lengthy contents. My code is
<iframe height='514' width='790'
marginwidth='0' marginheight='0'
frameborder='0'
overflow-y='scroll'
overflow-x='hidden'>
</iframe>
Anyone please solve my problem. Advance Wishes.
In the iframe page itself, add this:
body {
overflow-x:hidden;
height:100%; //optional, but it can't hurt.
}
If you are using a browser that supports CSS3 you could use the overflow-x property.
#my-iframe
{
overflow-x:hidden;
}
Here is an IFrame-resize script.
However, if you use SSL then there is no way to use a script to communicate between the frame and the main window. It will give an "access denied". :-(
Try setting scrolling attribute to "no"
<iframe scrolling="no" ..............> </iframe>
The solution is:
style="overflow-x:hidden;
overflow-y:scroll;
in tag <body> of page included on iframe
SEE THIS LINK PAGE
Regards by Raffaele.