Giters

mjmlio / mjml

MJML: the only framework that makes responsive-email easy

Home Page:https://mjml.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Outlook 1px horizontal when using direction rtl on mj-section

lerouxm opened this issue · comments

commented

When usign direction="rtl" on a section containing two columns, an horizontal line appears on ms-outlook desktop

The line takes the color of the body as it usually does with mso. Tried a lot of things like putting a white background on every table, tr, td, tbody, div, p etc..., ajusting paddings... but none of these worked.
Any idea would be welcome as I feel like I'm really stuck here :/
Thank you fellow mjml'ers !

Steps to reproduce the behavior:

Render this MJML to Outlook Desktop :

`

<mj-section direction="rtl" background-color="#ffffff" padding="16px">
  
  <mj-column vertical-align="middle">

    <mj-image src="https://picsum.photos/536/354"></mj-image>

  </mj-column>
  
  <mj-column vertical-align="middle">

    <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>

  </mj-column>
  
</mj-section>


<mj-section background-color="#ffffff" padding="16px">
  
  <mj-column vertical-align="middle">

    <mj-image src="https://picsum.photos/536/354"></mj-image>

  </mj-column>
  
  <mj-column vertical-align="middle">

    <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>

  </mj-column>
  
</mj-section>

`

image

commented

Found the answer to this issue here : https://litmus.com/community/discussions/5286-mysterious-white-line-in-outlook

Basically, with MSO, you wouldn't want to handle the direction and padding on the same table. Nesting is the key.

So using a mj-wrapper for the padding and then the section for the direction did the trick and the bug disappeared.

<mj-wrapper padding="16px">

  <mj-section direction="rtl" background-color="#ffffff" padding="0">
    
    <mj-column vertical-align="middle">

      <mj-image src="https://picsum.photos/536/354"></mj-image>

    </mj-column>
    
    <mj-column vertical-align="middle">

      <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>

    </mj-column>
    
  </mj-section>

</mj-wrapper>