Include CSS in HTML with Google app script

Question

Im trying to build a small app with google app script which will work as an inventory with login im working with HTML and CSS but facing difficulty in connecting both

when i try this in browser, nothing is shown

this is my structure

my code.gs is like this

    function doGet(request) {
  return HtmlService.createTemplateFromFile('Index')
      .evaluate();
}

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

My html script goes like this

    <!DOCTYPE html>    
    <html>    
     <head>    
       <base target="_top">
       <?!= include('Stylesheet'); ?>
      </head>    
    <body>    
        <h2>Login Page</h2><br>    
        <div class="login">    
        <form id="login" method="get" action="login.php">    
            <label><b>User Name     
            </b>    
            </label>    
            <input type="text" name="Uname" id="Uname" placeholder="Username">    
            <br><br>    
            <label><b>Password     
            </b>    
            </label>    
            <input type="Password" name="Pass" id="Pass" placeholder="Password">    
            <br><br>    
            <input type="button" name="log" id="log" value="Log In Here">       
            <br><br>    
            <input type="checkbox" id="check">    
            <span>Remember me</span>    
            <br><br>    
            Forgot <a href="#">Password</a>    
        </form>     
    </div>    
    </body>    
    </html>

and css goes like this

    <style>

    body  
    {  
        margin: 0;  
        padding: 0;  
        background-color:#6abadeba;  
        font-family: 'Arial';  
    }  
    .login{  
            width: 382px;  
            overflow: hidden;  
            margin: auto;  
            margin: 20 0 0 450px;  
            padding: 80px;  
            background: #23463f;  
            border-radius: 15px ;  
              
    }  
    h2{  
        text-align: center;  
        color: #277582;  
        padding: 20px;  
    }  
    label{  
        color: #08ffd1;  
        font-size: 17px;  
    }  
    #Uname{  
        width: 300px;  
        height: 30px;  
        border: none;  
        border-radius: 3px;  
        padding-left: 8px;  
    }  
    #Pass{  
        width: 300px;  
        height: 30px;  
        border: none;  
        border-radius: 3px;  
        padding-left: 8px;  
          
    }  
    #log{  
        width: 300px;  
        height: 30px;  
        border: none;  
        border-radius: 17px;  
        padding-left: 7px;  
        color: blue;  
      
      
    }  
    span{  
        color: white;  
        font-size: 17px;  
    }  
    a{  
        float: right;  
        background-color: grey;  
    }  
    <style>

what could be going wrong?

I refereed this document from google https://developers.google.com/apps-script/guides/html/best-practices

i changed my code to match this best practice but still having issues

Tanaike · Accepted Answer · 2023-01-22 08:47:04Z

2

I think that in your Stylesheet, the tag of <style> is not correctly enclosed. In your case, <style>,,,<style>. I think that this is the reason for your current issue. So, please modify your Stylesheet file as follows.

From:

a{  
    float: right;  
    background-color: grey;  
}  
<style>

To:

a{  
    float: right;  
    background-color: grey;  
}  
</style> <!-- Modified -->

Note:

When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".

edited Jan 22, 2023 at 8:47

answered Jan 22, 2023 at 8:32

Tanaike

203k12 gold badges126 silver badges222 bronze badges

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

4 Comments

albetroz Over a year ago

i modified the style sheet, now the html script is working and displayed but css is nit getting effective,

Tanaike Over a year ago

@albetroz Thank you for replying. I understand that your question says when i try this in browser, nothing is shown. From i modified the style sheet, now the html script is working and displayed, it was found that your issue was resolved. About but css is nit getting effective,, unfortunately, from your question, I cannot understand your 2nd question. I apologize for my poor English skill. When your HTML and CSS are used, it becomes as follows. jsfiddle.net/mcg43hpz What is your expected result? Can I ask you about the detail of your expected result?

albetroz Over a year ago

yes to an extend my issue is solved, i will post an additional question for the css

Tanaike Over a year ago

@albetroz Thank you for replying. From yes to an extend my issue is solved, I understood your issue was resolved. About i will post an additional question for the css, I understood it.

Collectives™ on Stack Overflow

Include CSS in HTML with Google app script

1 Answer 1

From:

To:

Note:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

From:

To:

Note:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related