My custom HTML code doesn't render correctly on Gmail

[ayoubamine]

Your software
My Mautic version is: 4.0.1
My PHP version is: 7.4.18
My Database type and version is: MariaDB 10.5.9

Your problem
My problem is: After creating a new email with “Code Mode”, editing the HTML, and saving the email, Mautic (or probably GrapesJS) refactor my HTML code and remove my inline CSS to the <style> tag.

The email is rendered well on Apple Mail and some other known email clients, but it’s not rendered properly on Gmail.

A chunk from my HTML code:

<td
  align="center"
  bgcolor="#6366F1"
  role="presentation"
  style="
    border: none;
    border-radius: 3px;
    cursor: auto;
    mso-padding-alt: 10px 25px;
    background: #6366f1;
  "
  valign="middle"
>
  <a
    href="{pagelink=1}"
    style="
      display: inline-block;
      background: #6366f1;
      color: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-weight: normal;
      line-height: 1.15;
      margin: 0;
      text-decoration: none;
      text-transform: none;
      padding: 10px 25px;
      mso-padding-alt: 0px;
      border-radius: 3px;
    "
    target="_blank"
  >
    Yes, subscribe me to this list.
  </a>
</td>

The new HTML after pasting it to the builder:

<td
  align="center"
  bgcolor="#6366F1"
  role="presentation"
  valign="middle"
  id="idqbp"
>
  <a
    href="{pagelink=1}"
    target="_blank"
    id="iirh6"
  >
    Yes, subscribe me to this list.
  </a>
</td>
<style>
#idqbp {
  border: none;
  border-radius: 3px;
  cursor: auto;
  mso-padding-alt: 10px 25px;
  background: #6366f1;
}
#iirh6 {
  display: inline-block;
  background: #6366f1;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.15;
  margin: 0;
  text-decoration: none;
  text-transform: none;
  padding: 10px 25px;
  mso-padding-alt: 0px;
  border-radius: 3px;
}
</style>

Apple Mail:

Gmail:

Gmail supports only inline CSS, so all my CSS code was ignored.

[joeyk]

Hi, yes the builder does this.
In order to make the email look good in every browser, you shoult use MJML.
Alternatively try to wrap your non-mjml code into tags.
https://documentation.mjml.io/#mj-body

[ayoubamine]

Hello @joeyk, thank you for your reply, I tried to add my HTML code into <mj-raw> tag, but the same problem, the inline CSS styles were removed from the whole code.

MJML code:

<mjml>
  <mj-body>
    <mj-raw>
      <p style="color: red;">Hello</p>
    </mj-raw>
  </mj-body>
</mjml>

Result code:

<mjml>
  <mj-body>
	<mj-raw>
	  <p id="ipvn">Hello
	  </p>
	</mj-raw>
  </mj-body>
</mjml>

Also, the GrapesJS builder doesn’t support some basic MJML tags like: mj-attributes, mj-class, mj-style, …, and it adds a default margin to all <p> tags that make my code impossible to customize it.

[ayoubamine]

Workaround:

1. Create the emails using MJML in vscode, then compile the code with the mjml-cli: mjml -w ./emails/**/*.mjml -o ./dist -c.minify true -c.beautify false.

2. Copy/paste the HTML code directly to the database by navigating to the emails table, clicking on the edit button, then pasting the code into the custom_html field.

I tested this solution on my dev env with an SMTP tester, the code is sent correctly with the inline CSS.

Is there any side effect of this solution? It’s safe to push it to the prod env?

[joeyk]

Which template are you using? Codemode?
What happens if you use anything but codemode?

[ayoubamine]

Yes, I tested the Code Mode and also all the built-in templates in the Mautic (4.0.1), but the same problem was with the inline CSS.

I noticed that in the Mautic 4.0.1 the Code Mode interface is the same as the template interface, but on the Mautic 3.3.3 the Code Mode has a different interface, it contains only an HTML editor with a preview area without the drag-and-drop feature.

Mautic 4.0.1:

The builder screenshot after selecting the Code Mode:

Mautic 3.3.3:

The builder screenshot after selecting the Code Mode:

I think it’s a bug on the Mautic 4.0.1 with the Code Mode interface, as you see above, the Code Mode and Template Mode have the same interface, which makes the edit experience for the Code Mode the same as Template Mode.

[ayoubamine]

Any Idea guys?

[hcoder]

Having the same issue. Had to rebuild my instance back on another version (went back to 3.0.1 since that is what a few other Mautic instances are on).

Mautic team, please update. Still broken in 4.0.2

[hcoder]

We never had to use MJML in previous versions, this is definitely a bug in 4.0.2. It looks like its adding arbitrary code to the html in the builder when selecting code-mode.

[joeyk]

Yes, that html template (blank) is highly unreliable.