0

I have created a sidebar with custom functionality for my spreadsheet. It used to work as expected, but when I opened the file recently it fails to load correctly.

I have an html file called Page that contains the html code. I have another file Stylesheet to store the css and have added it to Page like this:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    My Content
  </body>
</html>

This used to correctly load the stylesheet when I opened the file. However, now I see this instead:

enter image description here

From what I can tell, I am following the proper methods and process from here: https://developers.google.com/apps-script/guides/html/best-practices

I fear that I am missing something obvious, but I would appreciate any help you can provide to get this to work.

UPDATE

Here is my Stylesheet code:

<style>
    .width-100 {
      width: 98%;
      height: 100%
    }
    .red{ color:red; }
    i.material-icons,input[type='Submit']{
      cursor:pointer;
    }
    i.material-icons.active{
      border-bottom: 2px solid red;
      padding-bottom: 3px;
    }
    .sidebar.branding-below {
      top: 0;
    }
    .sidebar.bottom {
      border-top: 1px solid #ddd;
    }
    img.logo{
      position: relative;
      vertical-align: middle;
    }
    #topBar {
      border-bottom: 1px solid #bbb;
      margin-bottom: 10px;
      padding-bottom: 5px;
    }
    #settingForm {
      position: absolute;
      background: white;
      margin: 10px;
      width: 260px;
      top: 36px;
      box-shadow: 2px 2px 1px #bbb;
      border: 1px solid grey;
      padding: 10px;
      position: relative;
    }
    #settingForm hr {
      margin-top: 0;
    }
    #proserWorkSecurity{
    }
    #proserWorkSettings h3 {
      margin: 0 0 10px 0;
      line-height: 20px;
    }
    i#settingsClose {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
    }
    #processingWindow {
      position: absolute;
      padding: 200px 30px 30px 30px;
      width: 78%;
      height: 69%;
      background-color: rgba(256,256,256,0.9);
    }
    .formButton{
      cursor: pointer !important;
    }
    .formButton:hover{
      background: -webkit-linear-gradient(top, #4d90fe, #4787ed) !important;
      color: white !important;
      border: 1px transparent !important;
    }
    .Loader {
      text-align: center;
      padding: 80px 0;
    }
    .Loader_label {
      color: #363636;
      font-size: 13px;
      font-weight: 700;
      margin: 15px 0;
    }
    .CircleSpinner {
      -webkit-animation: spin 0.6s infinite linear;
      animation: spin 0.6s infinite linear;
      fill: #2196f3;
      height: 30px;
      width: 30px;
    }
    svg {
      overflow: hidden;
    }
  </style>

Here is my include:

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

UPDATE 2

I have created a test instance to make it easier to see what is happening. I have added a custom menu Campaign Manager with one menu item to open the sidebar.

https://docs.google.com/spreadsheets/d/10gsWSkaSvf7oi45SBluJm3Y-GsIteMrOP7uzP-26ewU/edit?usp=sharing

davids
  • 5,397
  • 12
  • 57
  • 94
  • There is nothing wrong with the HTML file or the scriplet. There is either a problem with your `include` function or something wrong with the Stylesheet. Or, there could be some kind of bug in HtmlService. We need to see the code that evaluates the template, and maybe the Stylesheet. – Alan Wells Mar 28 '17 at 23:19
  • @SandyGood I added the code. As far as I know, no changes were made to this part of the code between when it was working and when it broke. Did Google update how this works? – davids Mar 29 '17 at 00:00
  • The `include` code is wrong. It should be: `HtmlService.createTemplateFromFile(File).evaluate().getContent();` There is no way that `createHtmlOutputFromFile` would have evaluated that scriptlet before. Something got changed somehow. There was no change that would have created your problem. – Alan Wells Mar 29 '17 at 00:43
  • I tried you change and got the exact same results as before. Something else is happening. – davids Mar 29 '17 at 03:35
  • You will need to go through a process of elimination. Remove the other links and reload the HTML. As the answer states, what version is this happening in? The "exec" or the "dev" version? – Alan Wells Mar 29 '17 at 14:25
  • This isn't deployed, so I don't think it has a version (does it?). I tried removing the other links, changing the HtmlService methods used, searching online. Then, I posted to SO. I am guessing that it is something simple and "obvious", but I can't see it. So, I created a test file and shared it with all. – davids Mar 29 '17 at 15:14
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139386/discussion-between-davids-and-sandy-good). – davids Mar 29 '17 at 15:20

1 Answers1

1

Redeploy it with a new project version.

egg
  • 165
  • 9
  • This hasn't been deployed yet. I am testing it as an add-on. I don't have all the relevant links to deploy it as an add-on yet. – davids Mar 29 '17 at 15:03