Post

1 follower Follow
1
Avatar

Buttons in Outlook are too small

Hello,

I've read through the other posts on this issue, but couldn't find a solution.

We're experience problems with buttons in Outlook (tested on version 16.0.11601.20174).

The buttons in the editor appear fine and when the mail is opened in a browser they also appear fine, but whenever it's opened in Outlook, they appear very small and the text gets cut off.

The button has a link attached to it. 

The source looks like this:

<div class="button-container" align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://<<our link>>" style="height:7.5pt; width:4.5pt; v-text-anchor:middle;" arcsize="40%" stroke="false" fillcolor="#3a61a4"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:16px"><![endif]--><a href="https://<<our link>>" target="_blank" style="-webkit-text-size-adjust: none; text-decoration: none; display: inline-block; color: #ffffff; background-color: #3a61a4; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; width: auto; border-top: 1px solid #3a61a4; border-right: 1px solid #3a61a4; border-bottom: 1px solid #3a61a4; border-left: 1px solid #3a61a4; padding-top: 5px; padding-bottom: 5px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none; word-break: keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:16px;display:inline-block;"><span style="font-size: 12px; line-height: 24px;"><span style="font-size: 16px; line-height: 32px;"><strong>Button text</strong></span></span></span></a>
<!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->
</div>

The height and width of the v:roundrect are off. When I change this by hand, the button appears fine in Outlook, but after editing the template again, it's possible for the button to revert back to the small version.

I've tried removing and readding the button, that seemed to work for a while, but after a couple of template edits by our client, the button reverts back to the small version again.

 

I hope you can help me.

 

Sincerely,

Niels

Niels van Amstel

Please sign in to leave a comment.

1 comment

2
Avatar

Just a quick update for people who run into this problem.

In our case we ran into this when the editor was being loaded while the container was being hidden. We had the container in a Bootstrap Tab that was not yet opened/visible when it was loading the plugin.

We fixed it by delaying the loading of the plugin until the container was visible.

Niels van Amstel 2 votes