mjml | MJML: the only framework that makes responsive-email easy | Email library

Maybe MJML app > View > Toggle Developer Tools (Win + Alt + I)?

BTW: In addition to StackOverflow, a great source of MJML support is https://mjml.slack.com/ You probably would have gotten a more prompt response there than this one. (Sorry!)

1. If it is ambiguous whether you've used mj-column > width, I should suggest that as the first step. Perhaps you've used it.

2. Paradoxically, I'll suggest using mj-style inline="inline". In your MJML, target the HTML element you need using the technique suggested in https://documentation.mjml.io/#mj-html-attributes and Difficulty in understanding CSS-styling in MJML

If I understand your use case right, you need to get the necessary HTML attributes inside the HTML elements. MJML will put yours there because of the inline="inline" instruction above. That's the first HTML, the file MJML creates. With luck, the email client doing the forwarding won't change that. Maybe no client will change those; test carefully.

Your use case is challenging. Meeting the challenge of creating a generally forwardable email is huge; it's tough to know all possible modifications made at any one export or import at an email client, let alone the combined effect of combinations of clients. MJML typically makes email authors more efficient in getting email into all email clients the first time; MJML doesn't try to support forwarding. Each forward requires an export from the first email client and an import into the second. See https://www.litmus.com/blog/when-forwarded-emails-break/

BTW: In addition to StackOverflow, a great source of MJML support is https://mjml.slack.com/ You probably would have gotten a more prompt response there than this one. (Sorry!)

Your error message says it all:

Exception Value: Invalid block tag on line 3: 'translate', expected 'elif', 'else' or 'endif'.

It seems like the template does not like the translate nested inside the if.

You can override the template and override just the userlinks block

Some email clients don't like particular formatting such as !important, and will remove the whole style section if that is present.

Also it's always best to use HEX format for colours (i.e. #000000 not 'black'), though I think all email clients know what black is, but many interpret other colours inconsistently (and from memory Windows 10 App doesn't like rgb format).

Good question.

MJML and HTML are markup languages. MJML depends entirely on HTML and CSS for browser effects. That is, the MJML program translates the MJML markup into HTML and CSS. The browser gets only the HTML and CSS.

If we restrict ourselves to HTML and CSS constructs that email clients (Gmail, etc.) support, we can get good email results. That's hard. MJML helps.

In HTML, we can interact with DOM objects via CSS, sometimes using the concept of class. We can use attributes, both in and out of classes.

Similarly, in MJML we can interact with MJML components via MJML attributes and the MJML concept of mj-class. We can use MJML attributes both in and out of mj-classes.

The MJML mj-style component supports specifying CSS code that MJML includes in the HTML. That is, the code inside the mj-style tags is CSS, not either HTML or MJML. All syntax, application rules, and effects come only from CSS and HTML.

Email authors can apply MJML attributes and mj-class only to MJML components, not to HTML elements. MJML translates MJML markup to HTML, but email authors must depend on that translation process.

Consider this MJML script.

Answering my own question:

My team and I, on the investigation, found out that the versions specified in the Gemfile and Gemfile.lock were different. The versions had got upgraded explicitly, so we'd had to load a predefined Gemfile.lock, and bringing gems on the same version solved the issue. So, for anyone else facing this issue, please check the versions (of the Gemfile and Gemfile.lock).

PS. To much of our surprise, it didn't actually have anything to do with the database config.

You should use encodeURIComponent(). This will properly encode special characters.

According to their documentation, you can add the width attribute:

I had to abandon the list/placeholder way and store the suggestions separately: