mj-class stopped working

[quintall1]

Yesterday I startet building a mail with MJML and it worked just fine, but then about noon, the mj-classes stopped working. even starting from scratch again ignores the classes, though on preview it looks fine. Do I miss something, or did an update gone wrong?

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text padding="0" align="text-left" />
      <mj-container width="600px" background-color="#ECECEC" />
      <mj-button color="#fff" background-color="#e11c23" padding="10px" font-size="16px" border-radius="6px" />
      <mj-class name="white-block" background-color="white" border-radius="6px" padding="20px" text-align="left" />
      <mj-class name="grey-block" background-color="#ccc" border-radius="6px" padding="20px" text-align="left" />
      <mj-class name="filter-btn" color="#fff" background-color="#a60e3d" padding="10px" font-size="16px" border-radius="6px" />
      <mj-class name="jobtext" font-size="16px" />
      <mj-all font-family="Calibri,Verdana,sans-serif" font-size="20px" color="#333333" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-container>
      <!-- Logo -->
      <mj-section padding-top="30px" text-align="left">
        <mj-column width="58px">
          <mj-image src="http://news.staufenbiel.de/responsive-template/rt_05102016/mobil-links-rot@3x.png" alt="logo" padding="0px 0px" align="left" />
        </mj-column>
        <mj-column>
          <mj-text color="#666666" padding="0px 20px">
            Deine JobMail von<br />Staufenbiel Institut
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section mj-class="white-block">
        <mj-column width="100%">
          <mj-text>
            Hallo {{data:vname:""}},<br /> Einleitungssatz
          </mj-text>
        </mj-column>
        <mj-group mj-class="white-block" width="100%">
          <mj-raw>
            {% for tag in var:filter %}
          </mj-raw>
          <mj-column>
            <mj-button mj-class="filter-btn">{{tag}}</mj-button>
          </mj-column>
          <mj-raw>
            {% endfor %}
          </mj-raw>
        </mj-group>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

[dalefish]

Can you share your code please? It's hard to tell what is happening without.

Also would be useful to know what version MJML & NPM you are on or are you rendering via the API?

[quintall1]

I am using the editor from mailjet.com, so i don't know what version is behind that. The code I edited in the main post

[dalefish]

Okay, that should be a fairly up to date version.

I can't see any MJML or HTML in the original post, just some template variables, maybe add it in a code snippet?

[quintall1]

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text padding="0" align="text-left" />
      <mj-container width="600px" background-color="#ECECEC" />
      <mj-button color="#fff" background-color="#e11c23" padding="10px" font-size="16px" border-radius="6px" />
      <mj-class name="white-block" background-color="white" border-radius="6px" padding="20px" text-align="left" />
      <mj-class name="grey-block" background-color="#ccc" border-radius="6px" padding="20px" text-align="left" />
      <mj-class name="filter-btn" color="#fff" background-color="#a60e3d" padding="10px" font-size="16px" border-radius="6px" />
      <mj-class name="jobtext" font-size="16px" />
      <mj-all font-family="Calibri,Verdana,sans-serif" font-size="20px" color="#333333" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-container>
      <!-- Logo -->
      <mj-section padding-top="30px" text-align="left">
        <mj-column width="58px">
          <mj-image src="http://news.staufenbiel.de/responsive-template/rt_05102016/mobil-links-rot@3x.png" alt="logo" padding="0px 0px" align="left" />
        </mj-column>
        <mj-column>
          <mj-text color="#666666" padding="0px 20px">
            Deine JobMail von<br />Staufenbiel Institut
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section mj-class="white-block">
        <mj-column width="100%">
          <mj-text>
            Hallo {{data:vname:""}},<br /> Einleitungssatz
          </mj-text>
        </mj-column>
        <mj-group mj-class="white-block" width="100%">
          <mj-raw>
            {% for tag in var:filter %}
          </mj-raw>
          <mj-column>
            <mj-button mj-class="filter-btn">{{tag}}</mj-button>
          </mj-column>
          <mj-raw>
            {% endfor %}
          </mj-raw>
        </mj-group>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

[meriadec]

Okay, that should be a fairly up to date version.

I confirm that we use mjml@3.3.3 in our MJML editor

[dalefish]

That code renders okay for me with the CLI (same version), once you move the mj-raw out of the group.

@meriadec Would know more about any particular App specific issues.

[quintall1]

In the preview it worked before and workes without the group, though in the email version in outlook and gmail it still ignores the mj-class part

[dalefish]

Hmm, I can't replicate the problem, seems fine in Outlook, at least as far a the css application goes

Gmail and Outlook webmail look okay too:

[quintall1]

Strange, I still have the issue. I'll try the mailjet support next. maybe its an issue with their settings.

Thanks

[loeck]

@quintall1 Hey hey, can you re-try now ? The issue has been fixed now (issue related to the MJML Editor), you just need to regenerate the Html-part with a save.

[quintall1]

@lohek Great, now it works again. Thanks