MJ-SOCIAL - Outlook app android/iOS interpret wrong the icon-padding. #3043
Description
Description
When using icon-padding in mj-social-element, if the icon-padding is wider than the size of the icon-size/icon-height, the image became constrained in width up to 0, instead of increasing the width of the container table.
To Reproduce
Steps to reproduce the behavior:
- Create a file with this MJML code:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-social padding="10px" container-background-color="pink" icon-height="20px" icon-padding="15px" icon-size="40px" inner-padding="20px" mode="horizontal">
<mj-social-element icon-height="30px" icon-padding="10px 40px" icon-size="40px" background-color="lightblue" src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2017/04/0x0ss-85.jpg" padding="10px" href="https://mjml.io/"></mj-social-element>
<mj-social-element icon-height="30px" icon-padding="10px 40px" icon-size="30px" background-color="lightgreen" src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2017/04/0x0ss-85.jpg" padding="10px" href="https://mjml.io/"></mj-social-element>
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>
- Render it to HTML in MJML Try Live. I added a border 1px solid red/blue to the images to be able to see them.
<!doctype html>
<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
</style>
</head>
<body style="word-spacing:normal;">
<div aria-roledescription="email" style="" role="article" lang="und" dir="auto">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="background:pink;font-size:0px;padding:10px;word-break:break-word;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:10px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:lightblue;border-radius:3px;width:40px;">
<tbody>
<tr>
<td style="padding:10px 40px;font-size:0;height:30px;vertical-align:middle;width:40px;">
<a href="https://mjml.io/" target="_blank">
<img alt="" src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2017/04/0x0ss-85.jpg" style="border-radius:3px;display:block; border: 1px solid blue;" width="40" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:10px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:lightgreen;border-radius:3px;width:30px;">
<tbody>
<tr>
<td style="padding:10px 40px;font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://mjml.io/" target="_blank">
<img alt="" src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2017/04/0x0ss-85.jpg" style="border-radius:3px;display:block; border: 1px solid red;" width="30" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>
-
Send the HTML to an email address with HTMLTest to an outlook.com (or the like) account, and open it in Outlook App on Android or iOS. Outlook reader, not the native iOS email reader.
-
See error
Expected behaviour
You expect to see:
And you get this in Outlook Android:
And this in Outlook iOS:
MJML environment:
- OS: PC
- MJML Version: 4.18.0
- MJML tool used: MJML Try It Live
Email sending environment:
- https://htmltest.email/ - as HTML
Affected email clients:
- Email Client: Outlook
- OS: Android / iOS
Additional context
I added the red/blue border on the icon images to be able to see the 0px images.
It looks like Outlook is interpreting the width of the table as the max size of the object.
In the example, 30px.
So, the TABLE and the TD have 30px, same as the icon. But, as the padding is 10px 40px, the width of the container reduced the size of the image to accommodate the padding, instead of increasing the size of the table.
table/td width: 30px
padding: 40px
icon: 30px
- usual reader calc
40px(pad) + 30px(icon) + 40px(pad)=110px
110px table/td width, increasing the 30px stated.
But in Outlook
table/td width: 30px
padding 40px
icon 30px
-calc
40px(pad) + 0px(icon) + 40px(pad)=80px
80px table/td width, eliminating the image and increasing the 30px stated because of the padding.