Auth0 Home Blog Docs

Auth0 e-mail template interfering with Outlook

Hello!

I started to create custom e-mail templates. And for the start, I took a look at Auth0 templates.

I started to modify the code and soon realised, that in Outlook, there is an error with displaying the messages (there is something, but not in place). In Outlook, while everything is a mess, there is a button with functionality that works well. In Gmail, everything is in right place and works well. Outlook does offer the solution to show the email from the web browser, but I want the email to look right from the start, so customers should not take extra steps in order to show the email correctly.

Here is the picture of how (default Auth0 template) looks in Outlook:

And in browser, where information is cached:

What do I need to change in order for it to work properly?

If you have questions for me to explain the situation better, please, ask!

1 Like

Hi @KalmerR,

The emails templates are HTML based and should load the similarly on modern clients. Are you using an up-to-date version of Outlook?

Thanks,
Dan

Hello @dan.woda,
Sorry for the late reply. Yes, I use the latest version of Outlook. I did some research and found out that Outlook does not like paddings and other HTML and CSS elements.

When email is looked throguh web browser (logged in to Outlook), template is working correctly.

@KalmerR,

Glad you figured out what was causing the problem. Were you able work around it with email customization?

Thanks,
Dan

@dan.woda

I havent figured it out yet.

I marked the problem in yellow. I don’t know why this happens. When I try to select it (it’s clickable also), I can see, that it’s like one section. First section is where information is “Account”. And “second section” is where the yellow line.

To clarify: Outlook in web browsers displays the email template correctly, in program, it does not.

I took a look at it, but can’t reproduce as I don’t currently have access to an Office365/Outlook account on my machine.

You said it is clickable- what does it link to?

Hey @dan.woda, it is not linking to anywhere, when moving cursor on it, there just appears to be arrow, when clicking, it kind of moves the element around, and somehow, I did make this:


(Watch for the yellow marker)

Basically what I found out by experimenting is that the template uses “ghost tables”. If anyone comes across with the problem I had, read this:

I guess it’s solved, I don’t see the lines appearing anymore.

@KalmerR,

I’m happy you found a solution! Thanks for posting your solution as well, this is what makes an effective community. Best of luck!

Thanks,
Dan

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.