CODEWITHSUNDEEP
htmlcssjquery-uigoogle-apps-script
bob bob
bob bob

Reputation: 90

Google apps script: style tags work in index.html but not stylesheet.html

I'm a noob at GAS, so please forgive my stupid question...

My very simple css style works when it is part of index.html, but not when part of stylesheet.html. What am I doing wrong? Thanks in advance!

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>
  $(function() {
    $( "#studPropTabs" ).tabs();
  });
</script>

<div id="studPropTabs">
  <ul>
    <li><a href="#mainTab">Basic Information</a></li>
    <li><a href="#schedTab">Schedule & Course Drops</a></li>
    <li><a href="#planTab">Planning</a></li>
    <li><a href="#miscTab">Off-campus & Partner Info</a></li>
  </ul>
  <div id="mainTab">
    <form id='propForm'>
      <fieldset>
        <div>
          <label class='mainForm' for='firstName' >First Name</label>
          <input type='text' id='firstName' />
         </div>
        <div>
          <label class='mainForm' for='lastName' >Last Name</label>
          <input type='text' id='lastName' />
        </div>
      </fieldset>
    </form>
    </div>

 </div>

stylesheet.html

<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

<style>

label {
display: inline-block;
width: 5em;
color: red;
}

</style>

code.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index')
  .setTitle('Senior Project Proposal Form')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

Upvotes: 2

Views: 932

Answers (1)

Kriggs
Kriggs

Reputation: 3778

There's no page that is always included, you must specify it, just as said in Good Practices:

In code.gs:

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

In index.html:

<?!= include('Stylesheet'); ?>

Upvotes: 1

Related Questions