Menu
We use node.js to format html email sent by SendGrid to users to confirm account creation or other things like that. The email is sent correctly. All the content is displayed correctly. But, in Gmail, even if all the content is displayed correctly, there is a message at the end saying that the email was truncated and to click the link to to display all. If we click, we got the same content with some missing style. The same email in an other language will not display this message. But all email have the same structure. The email is lower than 30KB (code + images)
You will find the expended code above. (content have been changed) Following by the content generated in a ejs file.
I read the code many time to find any issue (missing tags). I tried to send it manually and the notification didn't appear. I calculated the weight to be sure it's over 102KB. Result: 30KB max. I compared code with an other one that don't have this issue. Nothing different on the structure. Only content differ.
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<style>
body{
font-family:Tahoma,Verdana,sans-serif;
font-size:14px;
color:#000;
margin:0
}
a{
text-decoration:none
}
a.link{
color:#EB3052;
font-weight:700
}
a.button{
background-color:#EB3052;
color:#fff;
padding:10px;
border-radius:5px;
text-transform:uppercase;
font-size:12px;
font-weight:700;
letter-spacing:1px
}
a.button.decline{
background-color:#f5f7f7;
color:#EB3052;
font-weight:400
}
ul{
line-height:24px
}
</style>
</head>
<body>
<div
style="
width:100%;
height: 100%;
text-align:center;
font-family: Tahoma, Verdana, sans-serif;
background-color: #F5F7F6;
"
align="center"
>
<table
width="600px"
cellspacing="0"
cellpadding="0"
border="0"
align="center"
style="
padding: 14px;
"
>
<tr>
<td
height="32"
width="30"
style="padding: 14px;"
>
<a
href="url"
>
<img
src="url"
border="0"
alt="url"
style="
max-height: 60px
"
/>
</a>
</td>
</tr>
<tr>
<td>
<table
width="100%"
style="
background: #fff;
text-align: left;
font-size:16px;
padding-top: 40px;
padding-bottom: 40px;
"
>
<tr>
<td
style="
padding-left: 32px;
padding-right: 32px;
"
>
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="0"
>
<tr>
<td>
<div
style="
width:100%;
height: 100%;
text-align:left;
font-family: Tahoma, Verdana, sans-serif;
line-height:18px;
"
>
Hi
<br/>
<br/>
Thanks to your contribution of $<%- body.amount %> to <%- body.recipient %>, the fundraising goal is one step closer!
<br/>
<br/>
Here is your transaction information:
<br/>
<br/>
<strong>
Transaction information
</strong>
<br/>
Transaction number:
<br/>
Recipient:
<br/>
Amount:
<br/>
Type:
<br/>
Date:
<br/>
Payment method:
<br/>
<br/>
<strong>
Billing information
</strong>
<br/>
Full name:
<br/>
Email address:
<br/>
Postal code:
<br/>
Country:
<br/>
<br/>
Thank you for your generosity!
<br/>
<br/>
Sincerely,
<br/>
<br/>
Lorem
<br>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td
style="
background: url(url), #EB3052;
background-repeat-x: repeat;
background-position-x: center;
height: 8px;
"
>
</td>
</tr>
<tr
style="
background-color:#EB3052;
text-align: left;
"
>
<td
style="
padding-top:14px;
padding-bottom:14px;
padding-left: 32px;
padding-right: 32px;
color:#fff;
font-size: 12px;
"
>
<strong>
Lorem ipsum dolor sit amet.
</strong>
<br/>
<strong>
Lorem ipsum dolor sit amet.
</strong>
</td>
</tr>
<tr>
<td
style="
text-align:center;
height:24px;
font-size: 13px;
color:#B1B1B1;
padding-top:14px;
padding-bottom:14px;
padding-left: 32px;
padding-right: 32px;
"
>
Lorem ipsum dolor sit amet.
<span
style="
color:#FFFFFF;
"
>
Lorem ipsum dolor sit amet.
</span>
Lorem ipsum dolor sit amet.
<br/>
<br/>
<a
href="url"
style="
color: #B1B1B1;
"
>
Lorem ipsum dolor sit amet.
</a>
|
<a
href="url"
style="
color: #B1B1B1;
"
>
Lorem ipsum dolor sit amet.
</a>
|
<a
href="url"
style="
color: #B1B1B1;
">
Lorem ipsum dolor sit amet.
</a>
<br/>
<br/>
<a
href="url"
>
<img
src="url"
border="0"
alt="url"
style="
max-height: 64px
"
/>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Hi <%- body.firstName %>!<br/><br/>
Thanks to your contribution of $<%- body.amount %> to <%- body.recipient %>, the fundraising goal is one step closer!<br/><br/>
Here is your transaction information:<br/><br/>
<strong>Transaction information</strong><br/>
Transaction number: <%- body.transactionNumber %><br/>
Recipient: <%- body.recipient %><br/>
Amount: $<%- body.amount %> <%- body.currency %><br/>
Type: <%- body.type %><br/>
Date: <%- body.date %><br/>
Payment method: <%- body.payment %><br/><br/>
<strong>Billing information</strong><br/>
<% if (body.organizationName) { %>
Company name: <%- body.organizationName %><br/>
<% } %>
Full name: <%- body.firstName %> <%- body.lastName %><br/>
Email address: <%- body.email %><br/>
Postal code: <%- body.postalCode %><br/>
Country: <%- body.country %><br/><br/>
Thank you for your generosity!<br/><br/>
Sincerely,<br/><br/>
<%- sender.name %>
The email is correctly is correctly and completely displayed, but a notification is displayed at the end of the email saying it was truncated (but not).
The notification should not appear in this case.
How to prevent Gmail to display the notification at the end of the email when the email is already correctly and completely displayed?
707
In my case the issue was caused by one non-ASCII character in the email (specifically ä) - adding it to any part of the message clips it in gmail.
I'm certain that I'm encoding the email in utf-8, perhaps sendgrid reincodes it somehow later on.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
