iframe: Add a height and width in the iframe string to correctly display the content - the placeholder has the same height and width - alternatively set the height and width each to 100% and adjust the
placeholder to correctly display the Google Sheet content.
Google Sheets Format Options
The embedded output from Google Sheets is a Google generated structure that can be personalised in terms of style and cell selection. Example structure with options in Red.
“https://docs.google.com/spreadsheets/d/Spreadsheet ID/publichtml?single=true&gid=Sheet ID&range=D15:E15& widget=false&chrome=false&headers=false”
gid is the Sheet ID (sheet number) in the URL for a published spreadsheet This is not the name as the name given to that tab, but identified by checking the URL. It is “0” for the first tab.
range lets you specify the range of cells you want to display.
widget lets you choose whether to display the sheet tabs at the bottom - true or false.
chrome lets you choose whether to display the spreadsheet title at the top - true or false.
headers lets you choose whether to display the spreadsheet title at the top - true or false.
publichtml? will be the string for a published spreadsheet, the alternative is embedhtml? where you have not published the sheets.
Example Cell Selection
<iframe id="Test2" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSeFi_s6Kjx6WXqEPm53JFEQAlPTZr2jCRFqmfJWOyfy0SeqL6Gh-
wbN5DSDQIrhsS47ZFUTXmIABKu/pubhtml?single=true&gid=0&range=A5:D6&&widget=false&chrome=false&headers=false" height="100%" width="100%"
style="border:none"></iframe>
<iframe id="Test" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSeFi_s6Kjx6WXqEPm53JFEQAlPTZr2jCRFqmfJWOyfy0SeqL6Gh-wbN5DSDQIrhsS47ZFUTXmIABKu/pubhtml?
single=true&gid=0&widget=false&chrome=false&headers=false" height="150" width="678" style=”border:none”></iframe>
Sometimes it is preferable to increase the size of the placeholder content. This can be achieved by giving the placeholder a name: e.g. “HTMLClass=Enlarge” and creating a Style for that Class which would
be placed in the Page HTML code. It would use Transform:
Example Code:
<style>
.Enlarge {
margin: 0;
border: 2px solid #00ff03;
padding:0px;
transform: scale(1.25);
}
</style>
This approach can be helpful when the embedded sheet, or a subset of it, is required in a mobile format /variant.
Working with Google Sheets & Placeholders