Default Styles Cause Issues on Gmail app on iOS

(0) Share

Report

Posted on by alemieux69

I have an email template in Dynamics that renders on every email client except for Gmail on iOS. In that app, any two-column layouts show text in a single column 1 letter at a time.

I did some testing with the HTML for the template in parcel.io and when I sent from Parcel, the email rendered OK in Gmail. When sending from Dynamics though, the problem persisted.

The issue was fixed when these additional styles that get added on send were removed:

.tbContainer .columnContainer table{table-layout:fixed!important}

As a workaround, I added the following style to the email:

u   .body .tbContainer .columnContainer table{table-layout:auto!important}

Then I added the body class to the <body> tag. The emails render fine now, but thought the Dynamics team should know.

I have the same question (0)

All responses (8)

Answers (0)

Jelena Rajkovic on at

Like (1)

Report

Hello,

Thank you for reporting this!

I have a few questions, so we can investigate on our side.

I'm not able to reproduce it when I use 2 column section with 2 text elements. I tried with "Wrap columns on mobile" on and off.

Are you using drag and drop elements or you have custom code that breaks?

Could you please provide repro steps or part of code that breaks? So we can make sure to fix it on our side if there is bug with our layouts.

Thank you!
alemieux69 2 on at

Like (1)

Report

I couldn't attach my code. The 2 column sections are not Dynamics blocks. They are custom blocks. Steps to follow, I took the HTML code verbatim and did a test send from parcel.io and it worked fine. It broke when I did a test send from Dynamics.
Eiken on at

Like (0)

Report

Hi,

Thank you for your feedback.

Would you please provide some screenshots about it to help us slove the problem better?
alemieux69 2 on at

Like (0)

Report

Here's a screenshot of the email rendering: https://www.dropbox.com/s/n13yvfbukd1sc7w/MicrosoftTeams-image%20%2826%29.png?dl=0

Here's a link to the MS Dynamics output: https://www.dropbox.com/s/47r5c3yrn9qzmiu/NIQ%20The%20Full%20View.eml?dl=0

Here's a link to the code: https://www.dropbox.com/s/06te8nvgwktan63/NIQ-brand-refresh_v1.html?dl=0

Jelena Rajkovic on at

Like (0)

Report

Hello,

The workaround in the code seems to not be working for me when I tested, I still see the broken email in Gmail iOS.
But I found the cause of the issue.

The content block in last section has the width set to 640px, if you remove that and set attribute width="100%" it will work the same but you don't need the additional style.

It should look like this:

Also, the last section has an error, you probably see a warning for this email that there is a syntax error.

The container attribute is on div, and this is not a correct layout structure.

My suggestion is to add a new section with one column, set spacing on section and column to 0 and move content block to that section. With the change of width, this should work as expected.

I can also share the code with the fix, if you want. Please let me know.

Best regards,
Jelena

alemieux69

2 on at

Like (0)

Report

Thanks, the style isn't applied because the body tag needs the class="body"

I will try the fix you suggested with the table width change.

alemieux69

2 on at

Like (0)

Report

Can I ask you about the flex tags in the first div? As far as I know, there are no email clients that accept flex styles. Maybe Apple Mail does? Why would MS Dynamics even use flex? It doesn't make any sense. Also, the double divs are constant in Dynamics. The first div is to declare a container and the second div is to declare the container type, in this case an editor-blocktype of Content. Should that not be the case?

Jelena Rajkovic on at

Like (0)

Report

We have a different structure for our section.

You can have div layouts and then div columns, but they wouldn't have table between them with our code inside.

If you have table inside div section, we expect the container to be on th or td element, not a div.

This can cause issue in our processing, because it mix between our code and custom code, and it can break things in an unexpected ways.

That's why I suggested to use a fresh section, with our code, just to be sure there are no issues with compatibility.

It's technically correct HTML code, but when you are using our data attributes, they need to be used as expected to avoid any issues in our processing of the email.