I'm using reactJS to rendering a email response, for email templates i tried with dangerouslySetInnerHtml ReactHtmlParser, the problem is always in Chrome, Firefox display the complete HTML template always but in Chrome the html to parse is incomplete even when I show it in console with console.log
Always in Chrome with dangerouslySetInnerHtml or ReactHtmlParser the string is incomplete, but in Firefox is complete and everything works fine.
This is the code for displaying the email:
<div dangerouslySetInnerHTML={{ __html: str }} id="body"/>
Where str is the decoded html to render
This is a raw output of str in Chrome which lacks of all stiles and images:
55% OFF until Monday, January 20th
UPGRADE TO START LEARNING
https://www.cybrary.it/upgrade/
-------------------------------------------------
Access all Career Path programs with
Your Cybrary Insider Pro Membership
It's easy! Pick your desired career and start learning the exact skills needed for that job.
Become A Network Engineer
https://www.cybrary.it/catalog/career-path/network-engineer/syllabus/
Become A Soc Analyst
https://www.cybrary.it/catalog/career-path/soc-analyst-level-1/syllabus/
Become A Penetration Tester
https://www.cybrary.it/catalog/career-path/penetration-tester/syllabus/
Become A Cyber Security Engineer
https://www.cybrary.it/catalog/career-path/cyber-security-engineer/
VIEW ALL CAREER PATHS
https://www.cybrary.it/catalog/career-paths/
© 2019 Cybrary, Inc. All Rights Reserved.
5801 University Research Court STE 150, College Park, MD 20740
If you no longer wish to receive these emails you may unsubscribe here: https://pages.cybrary.it/UnsubscribePage.html?mkt_unsubscribe=1&mkt_tok=eyJ…Z4OWF0SEFTSStLendsbHU5YlprTEF4S05qNTl6VHBzcElKZFhBU29uYWY3RGhVQkV4L1FuRiJ9.
And this is "part" of the same output same email but in Firefox which in browser it renders perfectly:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;">
<head>
<!-- Marketo Variable Definitions -->
<!-- Other Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Questrial:300,400,700" rel="stylesheet" type="text/css" />
<!--[if mso]>
<style type='text/css'>
.primary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
<!--[if mso]>
<style type='text/css'>
.secondary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
<style>
/*startcommon*/
@media only screen and (max-width: 640px) {
table.m_boxing{
width: 100% !important;
}
}
/*endcommon*/
</style>
<style media="all">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
can't paste all because is too large for a post, but you get the idea most of the raw html code suddenly disappear in chrome and i can't a solution. using Chrome 79 and Firefox 72.
