Google apps script, can not include css

Question

I'm newbie at google apps script. I have tried some examples, which work fine, but I've stuck with including css file.

In my code.gs I've created include function:

function include(filename) {
   return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

As well I've created css file "Sidebar.css.html", which contains some style parameters:

<style>
.branding-below {
 bottom: 56px;
 top: 0;
}

.branding-text {
left: 7px;
position: relative;
top: 3px;
}

.col-contain {
overflow: hidden;
}

.col-one {
float: left;
width: 50%;
}

.logo {
vertical-align: middle;
}

.radio-spacer {
height: 20px;
}

.width-100 {
width: 100%;
}
</style>

In my Sidebar.html I've tried to include the css:

<?!= include('Sidebar.css.html'); ?>

which apparently didn't work. Here is result:

In this link you can see the result(I dont have enough rep. to post it, sorry): http://dl1.joxi.net/drive/0005/1191/378023/150727/371cdf01c0.jpg

What can I do about it?

Answer 1

Instead of using createHtmlOutputFromFile , you'll want to use createTemplateFromFile and evaluate the template. Your code for adding the sidebar should look like this:

function showSidebar() {
  var template = HtmlService.createTemplateFromFile('Sidebar');
  var ui = template.evaluate().setTitle('Translate');
  SpreadsheetApp.getUi().showSidebar(ui);
}

Answer 2

I've changed showSidebar() to:

function showSidebar() {
var ui = HtmlService.createTemplateFromFile('Sidebar').evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle('Translate');
SpreadsheetApp.getUi().showSidebar(ui);
}

Which works not only correct, but even faster due to using 'IFRAME'

Answer 3

In my Sidebar.html I've tried to include the css: <?!=include('Sidebar.css.html'); ?> <?!=include('Sidebar.css.html'); ?>

I did this same thing but didn't include .html . Also, I made sure that the case of the filename in my code matched the case of the actual filename . In Google's example that you followed they have the CSS file capitalized in the code for some reason but it has to match the actual filename.

Answer 4

你有没有声明HtmlService变量是什么？