mjml
mjml copied to clipboard
Trailing space in section padding breaks Outlook rendering
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:
- Create a file with this MJML code:
<mj-section padding="1px 0 0 0 "><mj-column></mj-column></mj-section>
- Render it to HTML
- See the incorrect
tdwidth 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
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.
Yes, I forgot to mention the workaround is "don't do that." 😀