I'm using app script and create Html Template to send that template to email. The template looks like this.
But then when I send it through app script, it become like this:
As you can see the box is missing. Even the icons are missing. Any particular reason and solution?
GS Code
var emailTemp = HtmlService.createHtmlOutputFromFile("Approved-email").getContent();
var mailAddress = sheet.getRange(2,2).getValue();
MailApp.sendEmail(mailAddress,"Leave Status",'',{
htmlBody:emailTemp
});
For some reason stack overflow didn't allow me to write HTML code here.
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.card {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:300px;
min-height:400px;
background:#fff;
box-shadow:0 20px 50px rgba(0,0,0,.1);
border-radius:10px;
transition:0.5s;
border-style: dotted;
}
.card:hover {
box-shadow:0 30px 70px rgba(0,0,0,.2);
}
.card .box {
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
text-align:center;
padding:20px;
box-sizing:border-box;
width:100%;
}
.card .box .img {
width:120px;
height:120px;
margin:0 auto;
border-radius:10%;
overflow:hidden;
}
.card .box .img img {
width:100%;
height:100%;
}
.card .box h2 {
font-size:20px;
color:#262626;
margin:20px auto;
}
.card .box h2 span {
font-size:14px;
background:#e91e63;
color:#fff;
display:inline-block;
padding:4px 10px;
border-radius:10px;
}
.card .box p {
color:#262626;
}
.card .box span {
display:inline-flex;
}
.card .box ul {
margin:0;
padding:0;
}
.card .box ul li {
list-style:none;
float:left;
}
.card .box ul li a {
display:block;
color:#aaa;
margin:0 10px;
font-size:20px;
transition:0.5s;
text-align:center;
}
.card .box ul li:hover a {
color:#e91e63;
transform:rotateY(360deg);
}
</style>
</head>
<body>
<div class="card">
<div class="box">
<div class="img">
<img src="https://i.imgur.com/OWi3x57.gif">
</div>
<h2>Hi! John<br><span>Approved</span></h2>
<p> Details</p>
<span>
<ul>
<li><a href="#"><i class="fa fa-address-card" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-tree" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-quora" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</span>
</div>
</div>
</body>
</html>
Thanks
