Insert Google Drive Spreadsheet into Website

Asked

Viewed 1,512 times

1

I am programming an HTML/CSS site, but the client needs to update a spreadsheet that is on the cover of the site.

I managed to insert a spreadsheet created in Google Drive, through an iframe, but it gets white bars on the side and also with the title, I would like it to appear only content.

Is there any other way to do this without using CMS?

  • Did you use the spreadsheet posting feature on Google Drive? These white bars are what exactly? For me there are white bars, but it’s just the scroll bars.

  • Yes, I used this feature, and in iframe I disabled the scrollbars, there are those white bars that I can not remove, as well as the title of the sheet.

  • In this case an option can be at the time of publication you choose a range of cells to show. It is there on the same publication screen. This way, instead of showing the title, it will only show the selected cells.

  • I set a range in the iframe itself, but still the edges appear. And I searched the post and have no choice of cells.

  • To remove the slider try to put in css overflow: Hidden; and in <iframe scrolling="no" Seamless="Seamless">

  • Look at the image, I haven’t made the modification @Kallef made yet. I’m doing it tonight... http://s29.postimg.org/w8ugb80s7/10540371_10204297564578426_484421771_n.jpg

  • @Kallef, it didn’t work to put the Seamless, and neither the overflow.

Show 2 more comments

1 answer

1

You can force an element around the IFRAME in order to move the content you don’t want to see out of the viewport. Example:

<style type="text/css">
#iframe-holder {
    overflow:hidden;
    position: absolute;
    top:-430px;
    bottom:0px;
    left:0;
    right:0;
 }
#iframe-holder iframe {
    width:100%;
    height:100%;
 }
</style>

<div id="iframe-holder">
<iframe src="http://www.wired.com/" frameborder="0"  name="main" scrolling="no"></iframe>
</div>

Original content:

inserir a descrição da imagem aqui

IFRAME within a wrapper with explicit positioning, shifting 430 pixels upwards. Note that the deleted initial block:

inserir a descrição da imagem aqui

  • Thank you very much! It almost worked, I was able to cut the edges, but the table showed up on top of the header, away from the box she should be in... and it looks like there’s a mask in front of the header that makes it not work.

  • @Jefsilva I imagine it’s just a question of positioning. Don’t give up! =)

  • yes it is a question of positioning, but how to put the spreadsheet inside the box that was before? If you just put iframe inside div in html?

  • I have tried to move the iframe everywhere and it continues to "lock" what is underneath. It does not obey the upper div...

Browser other questions tagged

You are not signed in. Login or sign up in order to post.