Re: Elements with class "mktoModule" are removed when Sending Sample Email

TylerRobots · ‎12-29-2021

Hi,

I'm coding a email template but I keep reproducing an issue that I haven't had luck sorting out the cause of though I have resolved it in some way once or twice over the past week or two.

The elements in my template with the "mktoModule" class are removed when using Sending Sample Email, breaking my template layout in all the email clients I have tested in. Instead of a nice column, I get a mess of everything in a single horizontal row.
Marketo's editor describes no errors and the Preview looks as it should, though some classes are being duplicated on other unrelated elements...

Below is my source code. I removed a number of modules for brevity, but this is reproducing my issue.

Let me know if there are any more details I can provide.

Thank you in advance for the help!

<!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" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" style="width: 100%; ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]--> 
    
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta class="mktoString" id="headlineText" mktoname="Text" mktomodulescope="true" default="Scratch Made.&nbsp;&nbsp;The Finest Ingredients.&nbsp;&nbsp;Family Pride." />
<meta class="mktoNumber" id="headlineFontSize" mktoname="Font Size" mktomodulescope="true" default="28" min="1" max="42" units="px" step="1" />
<meta class="mktoNumber" id="headlineLetterSpacing" mktoname="Letter Spacing" mktomodulescope="true" default="0" min="-10" max="20" units="px" step="0.2" />
<meta class="mktoNumber" id="headlineLineHeight" mktoname="Line Height" mktomodulescope="true" default="28" min="1" max="42" units="px" step="1" />
<meta class="mktoColor" id="headlineColor" mktoname="Font Color" mktomodulescope="true" default="#df192c" />
<meta class="mktoString" id="subHeadlineText" mktoname="Text" mktomodulescope="true" default="Gumbo beet greens corn soko endive gumbo gourd.
 shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato." />
<meta class="mktoNumber" id="subHeadlineFontSize" mktoname="Font Size" mktomodulescope="true" default="30" min="1" max="42" units="px" step="1" />
<meta class="mktoNumber" id="subHeadlineLetterSpacing" mktoname="Letter Spacing" mktomodulescope="true" default="1" min="-10" max="20" units="px" step="0.2" />
<meta class="mktoNumber" id="subHeadlineLineHeight" mktoname="Line Height" mktomodulescope="true" default="30" min="1" max="42" units="px" step="1" />
<meta class="mktoColor" id="subHeadlineColor" mktoname="Font Color" mktomodulescope="true" default="#805140" />
<meta class="mktoColor" id="subHeadlineBackgroundColor" mktoname="Background Color" mktomodulescope="true" default="#f2e6ce" />
<meta class="mktoColor" id="textColor" mktoname="Text Font Color" default="#000000" />
<!-- Marketo Variable Definitions --> 
<meta class="mktoNumber" id="spacerSpacer" mktoname="Space Before" mktomodulescope="true" default="15" min="1" max="300" units="px" step="1" />
<style> @-ms-viewport { width: device-width; } @media only screen and (max-width: 800px) {table#boxing { width: 100% !important } } @media only screen and (max-width: 640px) {body { width: auto !important } table[class="table700"] { width: 450px !important } table[class="table1-2"] { width: 47% 
!important } table[class="footer-logo"] { text-align: right !important; width: 10% !important } td[class="outer"] { min-width: 0 !important } td[class="stack"] { padding-bottom: 40px !important } .stack-tablet { display: block !important; float: none !important; mso-hide: none !important; 
overflow: visible !important; padding-bottom: 20px !important } img[class="mobile-img"] { height: auto !important; width: 100% !important } td[class="center-tablet"] { text-align: center !important } td[class="hide-tablet"] { display: none !important } table[class="footer-column"] { text-align: 
left !important; width: 47% !important } .m_two-articles .table1-2 { width: 100% !important } .m_two-articles .photo img { width: 100% !important } .m_two-articles .stack-tablet td { height: 60px !important } } @media only screen and (max-width: 480px) {body { width: auto !important } 
table[class="table700"] { width: 340px !important } table[class="table1-2"] { clear: both; width: 100% !important } table[class="footer-logo"] { text-align: center !important; width: 60% !important } td[class="outer"] { min-width: 0 !important } .stack-smartphone { display: block !important; 
float: none !important; mso-hide: none !important; overflow: visible !important; padding-bottom: 20px !important } td[class="center-smartphone"] { text-align: center !important } img[class="mobile-img"] { width: 100% !important } td[class="center-tablet"] { text-align: center !important } 
td[class="hide-smartphone"] { display: none !important } table[class="footer-column"] { text-align: center !important; width: 100% !important } } @font-face {font-family: "Bree Serif"; font-style: normal; font-weight: 400; src: 
url(https://fonts.gstatic.com/s/breeserif/v10/4UaHrEJCrhhnVA3DgluA96Tp56N1.woff2) format("woff2"); unicode-range: U 100 -24F, U 259, U 1E00-1EFF, U 2020, U 20A0-20AB, U 20AD-20CF, U 2113, U 2C60-2C7F, U A720-A7FF} @font-face {font-family: "Bree Serif"; font-style: normal; font-weight: 400; src: 
url(https://fonts.gstatic.com/s/breeserif/v10/4UaHrEJCrhhnVA3DgluA96rp5w.woff2) format("woff2"); unicode-range: U 0 0FF, U 131, U 152 -153, U 2BB-02BC, U 2C6, U 2DA, U 2DC, U 2000 -206F, U 2074, U 20AC, U 2122, U 2191, U 2193, U 2212, U 2215, U FEFF, U FFFD} @font-face {font-family: "SanvitoPro 
Regular"; font-style: normal; font-weight: normal; src: url(https://kringle.ohdanishbakery.com/rs/134-XDK-122/images/SanvitoPro-Regular.otf) format("opentype")} @media screen and (-webkit-min-device-pixel-ratio: 0) {.primary-font { font-family: "SanvitoPro Regular", "Bree Serif", Georgia, "Times 
New Roman", serif !important } .secondary-font { font-family: Arial, Helvetica, sans-serif !important } .tertiary-font { font-family: "Bree Serif", Georgia, "Times New Roman", serif !important } } </style>
<!--[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]--> 
    <!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]--> 
  
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; min-width: 100%; width: 100%; ">
<table class="bodyTable" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; margin-top: 0; margin-right: 0; margin-bottom: 0; 
margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; height: 100% !important; width: 100% !important; min-width: 100%; width: 100%; ">
<tbody>
<tr>
<td class="outer" align="center" valign="top" bgcolor="#eeeeee" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; 
word-break: break-word; border-collapse: collapse; color: ${textColor}; background-color: rgb(238, 238, 238); min-width: 700px; "> 
            
<table class="mktoContainer" id="emailContainer" align="center" border="0" cellpadding="0" cellspacing="0" width="800" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; ">
<!-- Headline --> 
              
<tbody>
<tr class="mktoModule" id="headline" mktoname="Headline">
<td align="center" valign="top" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break: 
break-word; border-collapse: collapse; "> 
                    
<table class="m_headline table700" align="center" border="0" cellpadding="0" cellspacing="0" width="700" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; margin-top: 0; margin-right: auto; 
margin-bottom: 0; margin-left: auto; width: 700px; ">
<tbody>
<tr>
<td style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break: break-word; border-collapse: collapse; font-size: 
${headlineFontSize}; letter-spacing: ${headlineLetterSpacing}; line-height: ${headlineLineHeight}; ">
<div class="mktoText primary-font h1" mktoname="Headline Text" id="headline-text" style="font-family: &quot;Bree Serif&quot;, Georgia, &quot;Times New Roman&quot;, serif; font-size: 28px; color: ${headlineColor}; text-align: center; margin-top: 0.25em; margin-bottom: 0.25em; ">
                               ${headlineText} 
                            </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Spacer Viking Line --> 
                
<tr class="mktoModule" id="spacer-viking-line" mktoname="Viking Line Spacer">
<td align="center" valign="top" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break: 
break-word; border-collapse: collapse; "> 
                    
<table class="m_spacer-viking-line spacer" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; ">
<tbody>
<tr>
<td align="center" height="${spacerSpacer}" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break: break-word; 
border-collapse: collapse; font-size: ${spacerSpacer}; line-height: ${spacerSpacer}; text-align: center; "> <img src="https://kringle.ohdanishbakery.com/rs/134-XDK-122/images/flourish-viking-line.png" class="spacer" height="auto" width="700" style="-ms-interpolation-mode: bicubic; border: 0 none; 
height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; max-width: 700px; margin-right: auto; margin-left: auto; " /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Sub-Headline --> 
                
<tr class="mktoModule" id="sub-headline" mktoname="Sub-Headline">
<td align="center" valign="top" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break: 
break-word; border-collapse: collapse; "> 
                    
<table class="m_sub-headline" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; ">
<tbody>
<tr>
<td class="primary-font container" bgcolor="${subHeadlineBackgroundColor};" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 
100%; word-break: break-word; border-collapse: collapse; font-family: &quot;Bree Serif&quot;, Georgia, &quot;Times New Roman&quot;, serif; color: ${subHeadlineColor}; font-size: ${subHeadlineFontSize}; letter-spacing: ${subHeadlineLetterSpacing}; line-height: ${subHeadlineLineHeight}; 
background-color: ${subHeadlineBackgroundColor}; "> 
                            <center>
<div class="mktoText" mktoname="Sub-Headline Text" id="sub-headline-text">
<div class="p" style="margin-top: 0.5em; margin-bottom: 0.5em; text-align: left; margin-top: 0.25em; margin-bottom: 0.25em; margin-right: 15px; margin-left: 15px; text-align: center; "> 
                                  <b> ${subHeadlineText} </b> 
                                </div>
</div>
</center> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

edit: 2021-12-30 in the AM - spelling and code change

Jo_Pitts1 · ‎12-30-2021

@TylerRobots ,

I find that to be the case quite often. I don't even attempt to send samples from the template editor.

I'll keep the template open whilst editing, and in a separate tab have access to the the marketing activities where I'll have a test email. If all I am doing is editing modules, you can:

Edit the template
Open your test email
Remove old version of the module
Load new version and configure
Test send
Close the email
Rinse and repeat until the module is correct.

If you are doing major changes to the template itself, this process doesn't work so well, but for new modules or tweaks to existing ones it works fine

Cheers

Jo

View solution in original post

Jo_Pitts1 · ‎12-29-2021

@TylerRobots ,

are you talking about sending a sample email from the template editor, or when you create an email from this template?

Cheers

Jo

TylerRobots · ‎12-30-2021

Hi @Jo_Pitts1 ,

Thanks for the response.

This is using the Send Sample Email feature from the template editor menu.

TylerRobots · ‎12-30-2021

Jo,

I tried out "Send Sample" via the email editor (instead of the template editor). Those emails are correct when viewed in an email client! This looks like it could be a workaround if needed for the time, though a little inconvenient. 😤

...perhaps I'm jumping ahead, but maybe this is more of a Marketo Support ticket, seems like it could be something specific with the template editor? ...which I have few other gripes about already.

Thanks

Tyler

SanfordWhiteman · ‎12-30-2021

Modules aren’t expected to all be active in an email asset simultaneously (even if in specific cases they could be).

You need to think of your template as more like “source code“ only, and your emails as the compiled code + data.

Only with the data (i.e. selected modules in the Email Editor, variables, tokens) would you get the rendered email.

TylerRobots · ‎12-31-2021

@SanfordWhiteman wrote:

You need to think of your template as more like “source code“ only, and your emails as the compiled code + data.

Good point, thanks.

Jo_Pitts1 · ‎12-30-2021

@TylerRobots ,

I find that to be the case quite often. I don't even attempt to send samples from the template editor.

I'll keep the template open whilst editing, and in a separate tab have access to the the marketing activities where I'll have a test email. If all I am doing is editing modules, you can:

Edit the template
Open your test email
Remove old version of the module
Load new version and configure
Test send
Close the email
Rinse and repeat until the module is correct.

If you are doing major changes to the template itself, this process doesn't work so well, but for new modules or tweaks to existing ones it works fine

Cheers

Jo

TylerRobots · ‎12-31-2021

@Jo_Pitts1 ,

Thanks for your help.

...yeah, I've been doing a similar tab workflow.

Cheers -- have a Happy New Year!

Tyler