Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

4.2.1 difference to 4.2.0 : Outlook on Android columns with mj-group

See original GitHub issue

Firstly, thank you for MJML! It’s made emails so much nicer for us to work with.

4.2.1 seems to have introduced some behaviour that breaks <mj-group> on Outlook for Android.

Here’s the behaviour on 4.2.0: https://cl.ly/c22361c184eb/Screen Shot 2018-11-23 at 11.16.06.png

And here’s the same email (no changes to the MJML source) on 4.2.1: https://cl.ly/24b29b611424/Screen Shot 2018-11-23 at 11.16.47.png

I’m not seeing this change on any other client that we test. We are minifying our HTML.

Our code looks like this (I did wonder if it’s the mj-raw with the templating that’s causing a change)?

    <mj-raw>{% for item_row in items_for_email %}</mj-raw>
    <mj-section padding="0">
      <mj-group>
        <mj-raw>{% for item in item_row %}</mj-raw>
        <mj-column width="50%">
          <mj-image border-radius="6px" padding="0 5%" src="{{item.img}}" />
          <mj-text mj-class=" item-details" padding-top="0">
            <p style="font-weight:bold;">{{item.brand}}</p>
            <p>{{item.title}}</p>
            <p>{{item.price}} · <span style="color: #787878;">{{item.size}}</span></p>
          </mj-text>
        </mj-column>
        <mj-raw>{% endfor %}</mj-raw>
      </mj-group>
    </mj-section>
    <mj-raw>{% endfor %}</mj-raw>

The screenshots above are taken from Litmus.