htmlcssoutlookhtml-emailmjml

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


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

Steps to reproduce :

<mjml>

  <mj-body background-color="red">

    <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>
    
  </mj-body>
  
</mjml>

enter image description here

I tried different approaches like playing with the padding's (section/ content), adding a white background on every single element contained in the section, different hacks with css .. adding a 'MSO conditional' *<br> * and all those kind of things.

No luck so far, I'm pretty desperate atm.

Any help is warmly welcome, thanks !


Solution

  • 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.

    <mjml>
    
      <mj-body background-color="red">
      
        <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>
        
      </mj-body>
      
    </mjml>