Google sheets app script fails to process CSS styling

Question

I have an image in google spreadsheet. Pressing the button fires the script which is supposed to open a stylized table. Instead, it opens a table and fails to apply CSS style to it. I read Google documentation on making a separate file for styling and putting an include in the main HTML file as follows

//   <?!= include('stylesheet'); ?>

I did this. I get a table with with being a plain text.

How to make the script actually process CSS styles?

gs file:

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

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Stundu_laiki')
       .setHeight(600);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Stundu laiki')
      
}

stylesheet.html file with CSS for tables

<style>
.w3-table,.w3-table-all{}.w3-table-all{border:1px solid #ccc}
.w3-table-lined tr:nth-child(odd){background-color:#fff}.w3-table-lined tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
</style>

stundu_laiki.html with a table

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    **<?!= include('stylesheet'); ?>**
  </head>
  <body>
    <table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
            <tr>
              <td width="23%">1.</td>
              <td width="77%">8:30 - 9:10</td>
            </tr>
            <tr>
              <td>2.</td>
              <td>9:20 - 10:00</td>
            </tr>
            <tr>
              <td>3.</td>
              <td>10:10 - 10:50</td>
            </tr>
            <tr>
              <td>4.</td>
              <td>11:05 - 11:45</td>
            </tr>
            <tr>
              <td>5.</td>
              <td>12:00 - 12:40</td>
            </tr>
            <tr>
              <td>6.</td>
              <td>13:10 - 13:50</td>
            </tr>
            <tr>
              <td>7.</td>
              <td> 14:00 - 14:40</td>
            </tr>
            <tr>
              <td>8.</td>
              <td>14:50 - 15:30</td>
            </tr>
            <tr>
              <td>9.</td>
              <td>15:35 - 16:15</td>
            </tr>
          </table>

<h2> Saīsināto dienu stundu laiki</h2>

<table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
    <tr>
      <td width="23%">1.</td>
      <td width="77%">8:30 - 9:00</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>9:10 - 9:40</td>
    </tr>
    <tr>
      <td>3.</td>
      <td>9:50 - 10:20</td>
    </tr>
    <tr>
      <td>4.</td>
      <td>10:35 - 11:05</td>
    </tr>
    <tr>
      <td>5.</td>
      <td>11:20 - 11:50</td>
    </tr>
    <tr>
      <td>6.</td>
      <td>12:20 - 12:50</td>
    </tr>
    <tr>
      <td>7.</td>
      <td> 13:00 - 13:30</td>
    </tr>
    <tr>
      <td>8.</td>
      <td>13:40 - 14:10</td>
    </tr>
    <tr>
      <td>9.</td>
      <td>14:15 - 14:45</td>
    </tr>
  </table> 
  </body>
</html>

NightEye · Accepted Answer · 2021-09-10 17:48:08Z

2

Use createTemplateFromFile instead then evaluate your html. See final script below.

Final script:

function openDialog() {
  var html = HtmlService.createTemplateFromFile('stundu_laiki')
    .evaluate()
    .setHeight(600);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showModalDialog(html, 'Stundu laiki')    
}

Output:

answered Sep 10, 2021 at 17:48

NightEye

11.3k2 gold badges8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Google sheets app script fails to process CSS styling

1 Answer 1

Final script:

Output:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Final script:

Output:

Comments

Your Answer

Sign up or log in

Post as a guest

Related