mj-raw counts as a column in mj-section and the wrong class is then applied to column #1152

ChrisRast · 2018-04-20T16:32:31Z

When placing a mj-raw tag alongside of a mj-column, the raw content counts as a column and the mj-column finds itself with a class which does not represent the number of columns present in the section.

The doc states (emphasis by me):

attribute	unit	description	default attributes
width	percent/px	column width	(100 / number of columns in section)%

In all logic, it should only take into account the columns in sections and not the mj-raw.

And after many hours of reading the docs, I found nowhere that it was forbidden to use mj-raw in a section. Only thing I can notice is (in mj-section): "Also, any content in a section should also be wrapped in a column. "

The use I have in placing mj-raw tags alongside of mj-column is that we generate a template and use the mj-raw to insert loops. I also think that mj-raw should be allowed to be placed everywhere and not directly interfere with the layout.

Reproduction Steps:

Create a mjml.js file with this content

	const mjml2html =  require('mjml');

	const htmlOutput = mjml2html(`
	<mjml>
		<mj-head>
			<mj-title></mj-title>
		</mj-head>
		<mj-body>
			<mj-section>
				<mj-raw>
					raw content
				</mj-raw>
				<mj-column>
					column content
				</mj-column>
				<mj-raw>
					2nd raw content
				</mj-raw>
			</mj-section>
		</mj-body>
	</mjml>
	`, {
		beautify: true
	})

	console.log(htmlOutput.html)

Install mjml in the same folder as the mjml.js file: yarn add mjml, verify that you run the latest: yarn list --pattern mjml
Run the file to parse the mjml and output some html in console: node mjml.js

Expected behavior:

The HTML (div) generated from mj-column should have the class mj-column-per-100.

Observed behavior:

The HTML (div) generated from mj-colum has the class mj-column-per-33.

Generated file (redacted for lisibility):

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title> </title>
  <!--[if !mso]><!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  [...not relevant styles...]
  <style type="text/css">
    @media only screen and (min-width:480px) {
      .mj-column-per-33 {
        width: 33.333333333333336% !important;
      }
    }
  </style>
  <style type="text/css">
  </style>
</head>

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

        <tr>
      <![endif]-->raw content
              <!--[if mso | IE]>
            <td
               style="vertical-align:top;width:200px;"
            >
          <![endif]-->
              <div class="mj-column-per-33 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> </table>
              </div>
              <!--[if mso | IE]>
            </td>
          <![endif]-->2nd raw content
              <!--[if mso | IE]>
        </tr>

                  </table>
                <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
          </td>
        </tr>
      </table>
      <![endif]-->
  </div>
</body>

</html>

MJML version:

yarn list --pattern mjml

yarn list v1.5.1
warning package.json: No license field
warning No license field
├─ mjml-accordion@4.0.2
├─ mjml-body@4.0.2
├─ mjml-button@4.0.1
├─ mjml-carousel@4.0.2
├─ mjml-cli@4.0.3
├─ mjml-column@4.0.3
├─ mjml-core@4.0.1
├─ mjml-divider@4.0.1
├─ mjml-group@4.0.2
├─ mjml-head-attributes@4.0.1
├─ mjml-head-breakpoint@4.0.1
├─ mjml-head-font@4.0.2
├─ mjml-head-preview@4.0.1
├─ mjml-head-style@4.0.1
├─ mjml-head-title@4.0.1
├─ mjml-head@4.0.1
├─ mjml-hero@4.0.1
├─ mjml-image@4.0.3
├─ mjml-migrate@4.0.1
├─ mjml-navbar@4.0.3
├─ mjml-parser-xml@4.0.1
├─ mjml-raw@4.0.2
├─ mjml-section@4.0.1
├─ mjml-social@4.0.2
├─ mjml-spacer@4.0.1
├─ mjml-table@4.0.1
├─ mjml-text@4.0.3
├─ mjml-validator@4.0.1
├─ mjml-wrapper@4.0.1
└─ mjml@4.0.3

Thank you all for this amazing tool by the way! 👏

The text was updated successfully, but these errors were encountered:

kmcb777 · 2018-04-25T10:03:30Z

Hi @ChrisRast thanks for reporting this, after discussing it we decided to only ignore raw elements in this width calculation, all other elements will be counted. We'll update the doc accordingly

ChrisRast · 2018-04-25T10:05:32Z

Awesome, thank you ! 👍

fix #1152 dont count raw elements in auto width calc

kmcb777 added a commit that referenced this issue Apr 23, 2018

fix #1152 only count columns and groups in auto width calc

dea40cb

kmcb777 added this to the 4.1.0 milestone Apr 24, 2018

ChrisRast closed this as completed Apr 25, 2018

kmcb777 added a commit that referenced this issue May 4, 2018

Merge pull request #1155 from mjmlio/fix-1152

5b7f10c

fix #1152 dont count raw elements in auto width calc

iRyusa mentioned this issue May 9, 2018

mj-raw elements are taken into account for width calculation of mj-column #1186

Closed

iRyusa mentioned this issue May 22, 2018

html rendering add "mj-column-per-16" #1212

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mj-raw counts as a column in mj-section and the wrong class is then applied to column #1152

mj-raw counts as a column in mj-section and the wrong class is then applied to column #1152

ChrisRast commented Apr 20, 2018 •

edited

kmcb777 commented Apr 25, 2018

ChrisRast commented Apr 25, 2018

mj-raw counts as a column in mj-section and the wrong class is then applied to column #1152

mj-raw counts as a column in mj-section and the wrong class is then applied to column #1152

Comments

ChrisRast commented Apr 20, 2018 • edited

kmcb777 commented Apr 25, 2018

ChrisRast commented Apr 25, 2018

ChrisRast commented Apr 20, 2018 •

edited