Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mj-raw not placed at the right position #600

Closed
Almya opened this issue Mar 16, 2017 · 5 comments
Closed

mj-raw not placed at the right position #600

Almya opened this issue Mar 16, 2017 · 5 comments
Labels
MJML 4
Milestone
4.0.0

Comments

@Almya
Copy link

Almya commented Mar 16, 2017

As said in the title, I want to mix mjml with a rendering template but the tag does not position well. It seems that it doesn't wrap the commented tags well.

If I try to wrap a section with a twig tag

<mjml>
    <mj-body>
        <mj-container>
            <mj-raw>
                {% if online == false %}
            </mj-raw>
            <mj-section></mj-section>
            <mj-raw>
                {% endif %}
            </mj-raw>
        </mj-container>
    </mj-body>
</mjml>

the result is

<body>
  <div>
    <!--[if mso | IE]>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
      <tr>
        <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
          <![endif]-->
          {% if online == false %}
          <div style="margin:0px auto;max-width:600px;">
            <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
              <tbody>
                <tr>
                  <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;"></td>
                </tr>
              </tbody>
            </table>
          </div>
          {% endif %}
          <!--[if mso | IE]>
        </td>
      </tr>
    </table>
    <![endif]-->
  </div>
</body>

But the result should be

<body>
  <div>
    {% if online == false %}
    <!--[if mso | IE]>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
      <tr>
        <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
          <![endif]-->
          <div style="margin:0px auto;max-width:600px;">
            <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
              <tbody>
                <tr>
                  <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;"></td>
                </tr>
              </tbody>
            </table>
          </div>
          <!--[if mso | IE]>
        </td>
      </tr>
    </table>
    <![endif]-->
    {% endif %}
  </div>
</body>

Same if I try to use a for loop between columns

<mjml>
    <mj-body>
        <mj-container>
            <mj-section>
                <mj-raw>
                    {% for ... %}
                </mj-raw>
                <mj-column width="25%"></mj-column>
                <mj-raw>
                    {% endfor %}
                </mj-raw>
            </mj-section>
        </mj-container>
    </mj-body>
</mjml>

the result in the section is

<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="vertical-align:undefined;width:150px;">
      <![endif]-->
      {% for ... %}
      <div class="mj-column-per-25 outlook-group-fix" data-vertical-align="top" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
        <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
          <tbody></tbody>
        </table>
      </div>
      {% endfor %}
      <!--[if mso | IE]>
    </td>
  </tr>
</table>
<![endif]-->

But the result should be

<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <![endif]-->
    {% for ... %}
    <!--[if mso | IE]>
    <td style="vertical-align:undefined;width:150px;">
      <![endif]-->
      <div class="mj-column-per-25 outlook-group-fix" data-vertical-align="top" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
        <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
          <tbody></tbody>
        </table>
      </div>
      <!--[if mso | IE]>
    </td>
    <![endif]-->
    {% endfor %}
    <!--[if mso | IE]>
  </tr>
</table>
<![endif]-->
@iRyusa
Copy link
Member

iRyusa commented Mar 16, 2017 •
edited
Loading

Hi @Almya

Well this is a tricky things to fix because how hard it is to generate outlooks conditionnal comments in current MJML 3.X branch ( mostly because of react ). I think this is fixable in MJML 4, because we have more controls over outlook comments.

Keep in mind that we don't recommend using loop with mj-raw, because MJML engine has some work to do ( generate proper media queries, outlook table, etc ), best approach with MJML 3 is to apply templating language before sending it to MJML engine

@iRyusa iRyusa added the MJML 4 label Mar 16, 2017
@Almya
Copy link
Author

Almya commented Mar 16, 2017

Hi @iRyusa

Great, thanks. Do you have an idea when MJML 4 will be released ?

@iRyusa
Copy link
Member

iRyusa commented Mar 16, 2017

Well MJML 4 is a complete rework from scratch ( https://medium.com/mjml-making-responsive-email-easy/hey-were-entirely-rebuilding-mjml-from-scratch-announcing-mjml-v4-ae92f83b725b#.eov2ic7ng ) but we currently have no ETA for the first beta yet

@iRyusa
Copy link
Member

iRyusa commented Mar 28, 2017

Quick update here, it's now OK on branch next-social-table-outlook 👍

@web-padawan web-padawan mentioned this issue Apr 20, 2017
Merged
@iRyusa iRyusa mentioned this issue Apr 28, 2017
Closed
@iRyusa iRyusa mentioned this issue Aug 7, 2017
Closed
@iRyusa iRyusa mentioned this issue Aug 29, 2017
Closed
@ngarnier
Copy link
Member

The first beta for MJML 4 was released so I'm closing, install with npm install mjml@next.

@ngarnier ngarnier added this to the 4.0.0 milestone Jan 25, 2018
@dependabot-preview dependabot-preview bot mentioned this issue Mar 15, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
MJML 4
Projects
None yet
Milestone
4.0.0
Development

No branches or pull requests
3 participants
@iRyusa @ngarnier @Almya