Home > Software design >  Display none does not work on Microsoft Outlook App
Display none does not work on Microsoft Outlook App

Time:12-28

I am sending emails from the server to the customers and my html code works perfectly on every platform except Microsoft Outlook Desktop.

I am using html email templates with keys inside that I replace according to customers and email properties such as:

<tr style="display: {{displayProduct}};">

It turns into:

<tr style="display: none;">

There are product info under this such as productName. It does not display on other email clients but in outlook it looks like this:

enter image description here

I have used mso-hide attribute but it does not work. I placed it next to where display none is used. If display is none, also mso-hide:all. But it does not work.

I looked to the solutions in this entry, but none of them worked.

What can I do?

CodePudding user response:

Outlook uses Word as an email editor. Word considers the display cascading style sheet property as unsupported and unknown.

You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

CodePudding user response:

Use mso-hide:all; on the <td>(s) rather than the <tr>. Outlook for Windows is very specific about what can go where, and it's not intuitive.

  • Related