Remove Google Border From Embedded Google Sheet

Asked 30/8, 2020 at 1:4 Answered 10/11, 2022 at 14:44

Solved javascript html css google-apps-script google-sheets

I'm looking to embed a Google Sheet into a Google Extension. Simple enough — just use the autogenerated embed code and stick it into an html file. This is what I did:

<html>
  <link rel="stylesheet" href="extension.css">
  <iframe
    width="250px"
    height="250px"
    src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&amp;single=true&amp;widget=true&amp;headers=false">
  </iframe>
</html>

The result is this: https://i.sstatic.net/U1EfH.jpg. I just want the table with columns "TEAM" and "SCORE", is there a way to get rid of the Google border (i.e., "Color Wars Scoring : Sheet2" and the tab below)? I've looked for built-in ways to remove it and it seems like there once was, but not any more. That being said, I feel like there should be a simple enough work around, possibly with JavaScript. I just don't know enough to figure it out.

Thank you for your help!

Troth answered 30/8, 2020 at 1:4 Comment(0)

iframe {
  margin-top: -30px; /* Cut off top bar */
  margin-bottom: -30px; /* Cut off bottom bar */
}

div {
  overflow: hidden; /* Makes cutoff work */
  border: 2px solid black; /* Just for aesthetics, can be removed */
  display: inline-block; /* Fit div to contents */
}

<html>
  <link rel="stylesheet" href="extension.css">
  <div>
  <iframe
    width="250px"
    height="250px"
    src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&amp;single=true&amp;widget=true&amp;headers=false">
  </iframe>
  </div>
</html>

It's not the most beautiful thing, but I think we can achieve what you want using a container <div> element and negative vertical margins.

Drysalter answered 30/8, 2020 at 1:16 Comment(0)

You can edit the query string parameters to hide the top and bottom bars.

What you need here is chrome=false (hide the title above) and widget=false (hide the tabs below):

<html>
  <iframe
    height="170"
    width="450"
    frameBorder="0"
    src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=false&headers=false&chrome=false">
  </iframe>
</html>

Details of other options here: Google sheet embed URL documentation

Morrissey answered 10/11, 2022 at 14:44 Comment(0)

Recommended topics

Hot tags