Menu icon Foundation
Buttons revert to blue anchor in Outlook Android app (fixed)

I have just sent about 70 test emails in a desperate and very nearly forlorn attempt to find out why mails on the Outlook Android app via an exchange server had buttons with the default blue link colour. In the example below I have hacked one to show the difference. You may also notice that they are too skinny.

This I cannot fix but both errors look OK in the "3dot" drilldown mode peculiar to this client. Go figure.  

You will note that this truly awful client is not responsive either. Why does anybody use Microsoft product for anything?

After hand editing almost 70 different variants of style values in the nested tables comprising the button with some success but yet never finding values that work after a gulp build I had an epiphany. For some reason Outlook for Android does not enjoy having the color style attribute WITH THE SAME VALUE in the td outside the anchor. I cannot see what this attribute might do anyway so I tried two variants. Comment it out in or simply its value to be different. This is from line 64 in _button.scss

table {

    td {
      text-align: left;
      color: #a0a0a0;//$button-color;  
//comment the whole above line or just make the value different
      background: $button-background;
      border: $button-border;

      a {
        font-family: $body-font-family;
        font-size: map-get($button-font-size, default);
        font-weight: $button-font-weight;
        color: $button-color;

Hope this helps someone

 

Outlook app

I have just sent about 70 test emails in a desperate and very nearly forlorn attempt to find out why mails on the Outlook Android app via an exchange server had buttons with the default blue link colour. In the example below I have hacked one to show the difference. You may also notice that they are too skinny.

This I cannot fix but both errors look OK in the "3dot" drilldown mode peculiar to this client. Go figure.  

You will note that this truly awful client is not responsive either. Why does anybody use Microsoft product for anything?

After hand editing almost 70 different variants of style values in the nested tables comprising the button with some success but yet never finding values that work after a gulp build I had an epiphany. For some reason Outlook for Android does not enjoy having the color style attribute WITH THE SAME VALUE in the td outside the anchor. I cannot see what this attribute might do anyway so I tried two variants. Comment it out in or simply its value to be different. This is from line 64 in _button.scss

table {

    td {
      text-align: left;
      color: #a0a0a0;//$button-color;  
//comment the whole above line or just make the value different
      background: $button-background;
      border: $button-border;

      a {
        font-family: $body-font-family;
        font-size: map-get($button-font-size, default);
        font-weight: $button-font-weight;
        color: $button-color;

Hope this helps someone

 

Rafi Benkual over 2 years ago

Wow, that seems frustrating but glad you got it!

So is adding the color to the td the thing that did the trick?

Julian Warren over 2 years ago

Actually it seems to have been removing the identical colour that did the trick. That fooled me for ages.

So I added this to my _template.scss to I don't get overwritten by updates and its done the trick. The really odd thing is that the bizarre 3 dot drilldown below the footer presents the same email correctly (well sort of, still not responsive so still useless on a phone unless I am making some tragic error). Gmail app is now perfect. 

//fix Outlook App button issue

table.button {
  table {
    td {
      color: #a0a0a0; //This must not be the button-color so darken button-color would do;
      }
    }
  }

Ellisanin Mart almost 2 years ago

Try this code, I have this code on tutuapp regular version to fix the issue.

<div><!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
    <v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" />
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
  </v:roundrect>
<![endif]--><td valign="top" align="center" background="https://i.imgur.com/0xPEf.gif" style="background-image:url(https://i.imgur.com/0xPEf.gif);"><a href="https://" style="background-color:#556270;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a></td></div>


iOS man over 1 year ago

Im in love with your content and also gain some knowledge from your blog.

https://appvalleyandroid.com

https://192-168-l-254-ip.com

https://psiphonapp.com

 

iOS man over 1 year ago

Nice blog with genuine information. Thanks alot.

https://appsnewbie.com/tweakbox

https://appsnewbie.com/qooapp

https://appsnewbie.com/towelroot