mjml icon indicating copy to clipboard operation
mjml copied to clipboard

Trailing space in section padding breaks Outlook rendering

Open moorereason opened this issue 3 years ago • 2 comments

Describe the bug If a trailing space is left in the section padding, the resulting IE table width is calculated incorrectly.

To Reproduce Steps to reproduce the behavior:

  1. Create a file with this MJML code:
<mj-section padding="1px 0 0 0 "><mj-column></mj-column></mj-section>
  1. Render it to HTML
  2. See the incorrect td width of 598px:
              <td
                 style="direction:ltr;font-size:0px;padding:1px 0 0 0 ;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->

Expected behavior I expected to see the IE table td width being full width (600px):

              <td
                 style="direction:ltr;font-size:0px;padding:1px 0 0 0 ;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->

MJML environment:

  • OS: Windows 11 22H2 64-bit
  • MJML Version: 4.12.0
  • MJML tool used: MJML App

Affected email clients (for rendering issues):

  • Email Client: Outlook 2208 (Build 15601.20088)
  • OS: Windows 11 22H2

moorereason avatar Sep 08 '22 17:09 moorereason

Not really hard to fix here : https://github.com/mjmlio/mjml/blob/755560108beba66a575fbfc9417aba8d99ff9164/packages/mjml-core/src/helpers/shorthandParser.js

As we split the value with space, the extra space make 5 values instead of 4 so it will default to the first value.

For now just remove the space you'll be fine.

iRyusa avatar Sep 09 '22 07:09 iRyusa

Yes, I forgot to mention the workaround is "don't do that." 😀

moorereason avatar Sep 09 '22 11:09 moorereason