Foundation-emails: First character cannot be deleted in MailChimp editor

Created on 1 May 2016 · 21Comments · Source: foundation/foundation-emails

I'm using Foundation for Emails (2.1.0) to produce my template for MailChimp. For the most part, it's worked pretty seamlessly except I found a strange issue when trying to use the MailChimp rich text editor.

Specifically, when I use the mc:edit property to make content editable in MailChimp, I can't seem to delete the first character of a paragraph in the rich text editor. I hit delete/backspace, but the character does not delete. I can delete anything after the first character, but not the first one. If I go into the source code editor, I can make the necessary edits, but not in the rich text editor. I thought it was my template, but I was able to reproduce this issue on a very basic template created from Foundation for Emails 2.1.0.

I verified this in Chrome (v50) and Safari (latest).

How can we reproduce this bug?

Run foundation new --framework emails
Edit the default pages/index.html to have <p mc:edit="testContent">content</p>
Run npm run build
Copy the contents of dist/index.html file into a MailChimp template
Click on the editable content and try to delete the first character

Write out the HTML (or Inky code) that causes the issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><title>My Email Subject</title></head><body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important"><style>@media only screen{html{min-height:100%;background:#f3f3f3}}@media only screen and (max-width:596px){.small-float-center{margin:0 auto!important;float:none!important;text-align:center!important}.small-text-center{text-align:center!important}.small-text-left{text-align:left!important}.small-text-right{text-align:right!important}}@media only screen and (max-width:596px){table.body table.container .hide-for-large{display:block!important;width:auto!important;overflow:visible!important}}@media only screen and (max-width:596px){table.body table.container .row.hide-for-large{display:table!important;width:100%!important}}@media only screen and (max-width:596px){table.body table.container .show-for-large{display:none!important;width:0;mso-hide:all;overflow:hidden}}@media only screen and (max-width:596px){table.body img{width:auto!important;height:auto!important}table.body center{min-width:0!important}table.body .container{width:95%!important}table.body .column,table.body .columns{height:auto!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px!important;padding-right:16px!important}table.body .column .column,table.body .column .columns,table.body .columns .column,table.body .columns .columns{padding-left:0!important;padding-right:0!important}table.body .collapse .column,table.body .collapse .columns{padding-left:0!important;padding-right:0!important}td.small-1,th.small-1{display:inline-block!important;width:8.33333%!important}td.small-2,th.small-2{display:inline-block!important;width:16.66667%!important}td.small-3,th.small-3{display:inline-block!important;width:25%!important}td.small-4,th.small-4{display:inline-block!important;width:33.33333%!important}td.small-5,th.small-5{display:inline-block!important;width:41.66667%!important}td.small-6,th.small-6{display:inline-block!important;width:50%!important}td.small-7,th.small-7{display:inline-block!important;width:58.33333%!important}td.small-8,th.small-8{display:inline-block!important;width:66.66667%!important}td.small-9,th.small-9{display:inline-block!important;width:75%!important}td.small-10,th.small-10{display:inline-block!important;width:83.33333%!important}td.small-11,th.small-11{display:inline-block!important;width:91.66667%!important}td.small-12,th.small-12{display:inline-block!important;width:100%!important}.column td.small-12,.column th.small-12,.columns td.small-12,.columns th.small-12{display:block!important;width:100%!important}table.body td.small-offset-1,table.body th.small-offset-1{margin-left:8.33333%!important;Margin-left:8.33333%!important}table.body td.small-offset-2,table.body th.small-offset-2{margin-left:16.66667%!important;Margin-left:16.66667%!important}table.body td.small-offset-3,table.body th.small-offset-3{margin-left:25%!important;Margin-left:25%!important}table.body td.small-offset-4,table.body th.small-offset-4{margin-left:33.33333%!important;Margin-left:33.33333%!important}table.body td.small-offset-5,table.body th.small-offset-5{margin-left:41.66667%!important;Margin-left:41.66667%!important}table.body td.small-offset-6,table.body th.small-offset-6{margin-left:50%!important;Margin-left:50%!important}table.body td.small-offset-7,table.body th.small-offset-7{margin-left:58.33333%!important;Margin-left:58.33333%!important}table.body td.small-offset-8,table.body th.small-offset-8{margin-left:66.66667%!important;Margin-left:66.66667%!important}table.body td.small-offset-9,table.body th.small-offset-9{margin-left:75%!important;Margin-left:75%!important}table.body td.small-offset-10,table.body th.small-offset-10{margin-left:83.33333%!important;Margin-left:83.33333%!important}table.body td.small-offset-11,table.body th.small-offset-11{margin-left:91.66667%!important;Margin-left:91.66667%!important}table.body table.columns td.expander,table.body table.columns th.expander{display:none!important}table.body .right-text-pad,table.body .text-pad-right{padding-left:10px!important}table.body .left-text-pad,table.body .text-pad-left{padding-right:10px!important}table.menu{width:100%!important}table.menu td,table.menu th{width:auto!important;display:inline-block!important}table.menu.small-vertical td,table.menu.small-vertical th,table.menu.vertical td,table.menu.vertical th{display:block!important}table.menu[align=center]{width:auto!important}}</style><table class="body" style="Margin:0;background:#f3f3f3;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><center data-parsed="" style="min-width:580px;width:100%"><table class="container float-center" style="Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:16px;text-align:left;width:564px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p mc:edit="testContent" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p></th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th></tr></table></th></tr></tbody></table><table class="row collapse" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:0;padding-right:0;text-align:left;width:588px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p></th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th></tr></table></th></tr></tbody></table><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:8px;text-align:left;width:274px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">One Word</p></th></tr></table></th><th class="small-12 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;text-align:left;width:274px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure perferendis praesentium quia distinctio, assumenda dolor pariatur! Dolore perspiciatis ratione consequuntur obcaecati cumque molestias, corporis fugiat blanditiis, sit nisi deleniti beatae?</p></th></tr></table></th></tr></tbody></table><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-2 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:8px;text-align:left;width:80.67px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">One word</p></th></tr></table></th><th class="small-12 large-4 columns" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:8px;text-align:left;width:177.33px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus velit eveniet est odit doloribus minus, reprehenderit vitae excepturi numquam repellendus natus consectetur dolorem. Quam, voluptatem non aperiam rem voluptas sequi?</p></th></tr></table></th><th class="small-12 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;text-align:left;width:274px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus velit eveniet est odit doloribus minus, reprehenderit vitae excepturi numquam repellendus natus consectetur dolorem. Quam, voluptatem non aperiam rem voluptas sequi?</p></th></tr></table></th></tr></tbody></table><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-2 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:8px;text-align:left;width:80.67px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">One Word</p></th></tr></table></th><th class="small-4 large-4 columns" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:8px;text-align:left;width:177.33px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga repellendus velit aut perferendis, eveniet delectus maxime quisquam recusandae assumenda culpa tenetur dolorem error voluptatibus. Animi accusamus molestiae placeat, sequi beatae.</p></th></tr></table></th><th class="small-8 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;text-align:left;width:274px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quis obcaecati facere dolore laborum officia rem praesentium cumque culpa delectus alias ullam ad, doloremque, ipsa asperiores ex sit necessitatibus minima!</p></th></tr></table></th></tr></tbody></table></td></tr></tbody></table></center></td></tr></table><div style="display:none;white-space:nowrap;font:15px courier;line-height:0">                                                           </div></body></html>

What did you expect to happen?

I expected to be able to use the MailChimp rich text editor to edit any of the text in the editor section.

What happened instead?

I could edit everything except the first character in each paragraph.

What email clients does this happen in?

Not relevant.

help wanted

Source

dmorda

Most helpful comment

I just did a bit more digging. When I run the build script, it generates a lot of inline styles that contain the "display:table" CSS property. If I remove those and paste the same code into MailChimp without them, everything works in the MailChimp editor. However, I'm not what implications this would have on compatibility across email clients.

So, I'm not sure of this is a bug in Foundation Emails, MailChimp, or CKEditor.

dmorda on 4 Jun 2016

👍3

All 21 comments

Not familiar with the Mailchimp editor. Do you have any guesses to what may cause this?

rafibomb on 4 May 2016

Hi @rafibomb,

MailChimp (http://mailchimp.com) is a popular online service for email marketing campaigns. In my case, I'm using Foundation for Emails to generate the code and then I paste it into the MailChimp template. I can't speak for the community, but I'd imagine this is a pretty common use case since it's one of the more popular tools.

Based on some troubleshooting, it seems that MailChimp uses CKEditor. When I click on an editable section of my newsletter, the editor swings into the browser so I can edit that content. If I inspect the HTML under the hood, it's in an iframe. If I dig deeper, I see that CKEditor is importing a CSS file that contains this:

html {
    display: block !important;
}

body {
    margin: 15px !important;
    margin: 0;
    margin-bottom: 10px;
    color: #202020;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    padding: 0;
    text-align: left;
    vertical-align: top;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    display: table; <----- offending line
    position: relative;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
    -moz-box-shadow: 0 2px 2px 0 #ccc;
    -webkit-box-shadow: 0 2px 2px 0 #ccc;
    box-shadow: 0 2px 2px 0 #ccc;
    background: #fefefe;
    float: none;
    min-width: 600px;
    -moz-box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

.bodyContent div a:link,.bodyContent div a:visited {
    color: #cf3030;
}

The offending property seems to be "display: table". Once I remove that, everything works as expected. What I'm not able to easily tell is whether this is a bug triggered by a way Foundation for Emails generates/inlines the final code, or it's a bug in CKEditor, etc.

I realize this may require troubleshooting with a third-party service, but I figured I'd submit it anyway since MailChimp seems to be a pretty popular service and others might be affected too.

Let me know if there's anything else I can do to help.

dmorda on 5 May 2016

👍2

Hey @dmorda! Have you come across any solution to this? Would be a great help.

iamsankalp on 3 Jun 2016

Nothing yet, but I hope we can figure it out soon. I'd like to use this framework on a few other projects, but this issue is a blocker because the customers want to be the editors in MailChimp and having them go into the source editor is a non-starter.

dmorda on 3 Jun 2016

So, I'm not sure of this is a bug in Foundation Emails, MailChimp, or CKEditor.

dmorda on 4 Jun 2016

👍3

@rafibomb Could you please share some thoughts on the solution that @dmorda suggests? I could have a rough go at Litmus with all display:table properties removed. Seems good to me.

Please suggest. Thanks!

iamsankalp on 9 Jun 2016

Hey @dmorda! I figured out one way that may help for now. Encapsulating your each editable text block into a div gets rid of the issue.

Try

<div mc:edit="title-subtext">
     <p class="text-center">
        Don’t worry, you’ll receive it within 10 working days
     </p>
</div>

iamsankalp on 9 Jun 2016

👍1

Hi @iamsankalp,

Nicely done. That seems like a good temporary workaround, but one you've got to be careful with. I tried it on my template and if I delete all the text in the mc:edit area, I can no longer edit that area. So it seems like you can edit text that's there including the first character, but not delete it and re-write it, which is the ideal.

Maybe I'm doing something wrong?

dmorda on 11 Jun 2016

Hi @dmorda,

Unfortunately, I'm also facing the same problem - despite the fact that it's actually how mailchimp writes its text content for mc:edit. (Ex: Refer in the code block after mc:variant section on this page)

Let us all know if you come across some solution for this.

On other note, just wondering- is it possible to create draggable section in template? Like if i want to move a paragraph block above or below image without using mc:variant.

Thanks,
Sankalp

iamsankalp on 11 Jun 2016

Thought I would chirp in on this one too as I am having the same issue. Depressingly as this is a time-sensitive project it will have to be handed over to the client with the 'View Source' get around.

Would love to see some progress on this issue as incompatibility with MailChimp will rapidly return me to coding by hand...will be a huge shame as Foundation for Emails ROCKS otherwise!

Cheers,

Will

wgstjf on 23 Jun 2016

@wgstjf Hope my previous comment on this thread will solve it for you. Please check this - https://github.com/zurb/foundation-emails/issues/408#issuecomment-224793642

iamsankalp on 23 Jun 2016

Sankalp,

Thanks for the quick response. I am finding your (otherwise great) solution is not working 100%. The text editor won't let you do a 'Select All' - which is really frustrating.

Additionally I can't use a div wrapper on things like H2 headers etc as I need to retain all the foundation styling and the div cannot sit within the header tag.

Cheers,

Will

wgstjf on 23 Jun 2016

Hi, Will!

Not sure if I could understood you completely well. Sorry for that.

command (⌘) + A does work for me.
Following piece lets me edit H2 well enough while retaining styles in app.scss. Without needing to put <div> within H2.

<div mc:edit="title">
    <h2 class="your-style-class">
        How're you doing today?
    </h2>
</div>

Hope this helps.

Sankalp

iamsankalp on 23 Jun 2016

Sorry for not being clear...most likely my fault :-)

So Ctrl/Command + A does indeed "Select All" - my problem is that, without your div fix, attempting to type over it does nothing. With the fix it you can overwrite it ish....the selected text disappears but nothing you type shows up :-( Tried this on both PC and Mac
The problem with putting the DIV outside of the H2 tag is that the client can then overwrite the entire H2 tag and all it's formatting. All I want them to be able to do is change the text. For now I will have to stick to them having to 'View Source'. This way ensures that it is only the text they can modify.

Hope that makes sense.

Cheers,

Will

wgstjf on 23 Jun 2016

Anyone have luck finding a workaround for this issue?

dmorda on 13 Aug 2016

Unfortunately none at all...we need some extra heads on this as it is a big issue that Foundation doesn't play nice with the biggest bulk emailer out there...

wgstjf on 17 Aug 2016

I'm experiencing the same issue. Was hoping to find a solution to this.

jwmatlock on 13 Oct 2016

Hi @jwmatlock, have had the same issues (as mentioned above) and have found that @dmorda solution works well with no obvious side-effects. I have checked it on multiple devices and no issue so far...

The answer therefore is to do a find replace on the finalised code for 'display:table;' and replace it with '' (ie. nothing).

I have an ever increasing list of things I have to do to the finalised code to make it 'MailChimp friendly' :-)

Cheers,

Will

wgstjf on 13 Oct 2016

Experiencing same issue. Removing the display:table for now seems to work. Hope there are no side effects.

jesnil01 on 16 Nov 2016

👍1

Thanks for that workaround, @dmorda! It's been quite a few months of silence on this issue. Are there any news from the devs about it, @rafibomb?

It looks like there's only one line (line 59 in _grid.scss) that needs changing (ie commenting out), but I assume it's there for a reason, so it'd be nice to hear what side effects this causes.

For now, commenting out that line is my workaround to avoid having to do the find/replace on every single build.

If that line is indeed removable without ill effects, is there a chance this could be done in the repo?