Foundation-emails: Buttons don't expand in Outlook 2013

Created on 3 May 2016 · 35Comments · Source: foundation/foundation-emails

How can we reproduce this bug?
This has been tested using the inliner, and emailing it (using nodemailer) to an email address consumed via Outlook 2013.

<button href="#" class="primary expanded">
    Expanded button
</button>

What did you expect to happen?
Button to be expanded all the way across the container.

What happened instead?
Button is only the length of the anchor (i.e. the text itself with specified padding in scss).

What email clients does this happen in?
Outlook 2013

Inky bug button help wanted

Source

davidhouweling

👍5

Most helpful comment

I believe the solution is simply that the <td> under button.expanded needs width: 100% (of course not the expander). The CSS I used to fix it:

.button.expanded {
  td:not(.expander) {
    width: 100%;
  }
}

This does apply width further inside as well, but I don't believe this to have a negative effect, however if you wanted to be extra cautionary, I believe the doing .button.expanded > tr > td is enough.

Sorry I don't submit a PR as I don't have Litmus going so I don't want to submit a PR that might impact on other clients, so it should be tested accordingly first.

davidhouweling on 3 May 2016

👍3

All 35 comments

I believe the solution is simply that the <td> under button.expanded needs width: 100% (of course not the expander). The CSS I used to fix it:

.button.expanded {
  td:not(.expander) {
    width: 100%;
  }
}

Sorry I don't submit a PR as I don't have Litmus going so I don't want to submit a PR that might impact on other clients, so it should be tested accordingly first.

davidhouweling on 3 May 2016

👍3

I'm having this same issue in Outlook. Issue #330 (closed) suggests setting the inner

width to 100%; David above says the

should be 100%. Neither solution has worked for me.

RonTL on 3 May 2016

table and td, sorry...

RonTL on 3 May 2016

The davidhouweling method appears to have solved the issue for me, though I had to use this:

.button.expand { td:not(.expander) { width: 100%; } }

That is, _button.expand_ rather than _button.expander_.

antonydjames on 4 May 2016

👍1

Nice catch, we'd love to see a PR for this!

tdhartwick on 4 May 2016

Couple questions on this:

are you on v2.1?
what is the test case that causes this? Is the button in a 12 column container or smaller? Would love to see a code example added in the test folder so that we can make sure this is resolved moving forward

rafibomb on 4 May 2016

Hi Rafi,

Thanks for contacting me.

No, I am not using v2.1—some weeks ago I wrote to you asking for suggestions, saying how overwhelmed I was by all the Sass and Panini and all that stuff and that it was all over my head. That said, I am trying to get to know the CSS flavor of v2.0 and am getting encouraging results. In fact, after I posted to GitHub yesterday I arrived at the same solution as antonydjames, and my buttons are now displaying properly in Outlook. Would posting my code to the test folder actually be helpful to the other email developers, or would the benefit be negligible since my code wouldn’t be as sophisticated as all the Sass guys?

And, while I have you… My supervisor has given me approval to take the Zurb University online email class. How does that work—how long does it last? Do I take it all at once, or can I do it in segments as my schedule permits? How do I pay for it? Would this be a good place for me to start down the Sass path?

Thanks again
Ron Jagielnik
Email Developer
[TRIPP LITE]http://www.tripplite.com/
1111 W. 35th Street
Chicago IL 60609 USA
[http://www.tripplite.com/common_2010/img/icons/icon-phone-sm.gif] +(773) 869 1211
[http://www.tripplite.com/common_2010/img/icons/icon-fax-sm.gif] +(773) 869 1130
[email protected]

[tripplite.com]http://www.tripplite.com/[Follow us on Twitter]http://twitter.com/tripplite[Find us on Facebook]http://www.facebook.com/TrippLite[See us on YouTube]http://www.youtube.com/user/tripplite

From: Rafi [mailto:[email protected]]
Sent: Wednesday, May 04, 2016 3:20 PM
To: zurb/foundation-emails [email protected]
Cc: Ron Jagielnik [email protected]; Comment [email protected]
Subject: Re: [zurb/foundation-emails] Buttons don't expand in Outlook 2013 (#415)

Couple questions on this:

are you on v2.1?
what is the test case that causes this? Would love to see a code example added in the test folder so that we can make sure this is resolved moving forward

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHubhttps://github.com/zurb/foundation-emails/issues/415#issuecomment-216989998

This message is for the addressee's use only. It may contain confidential information. If you receive this message in error, please delete it and notify the sender. Tripp Lite disclaims all warranties and liabilities, and assumes no responsibility for viruses which may infect an email sent to you from Tripp Lite and which damage your electronic systems or information. It is your responsibility to maintain virus detection systems to prevent damage to your electronic systems and information.

RonTL on 4 May 2016

@rafibomb Yes I am using foundation-emails version 2.1.0. The container doesn't matter. Initially I thought it might, but it doesn't. Put it on its own, put it inside a container, put it inside a column, it doesn't occupy its parent's width. With what I provided above it does.

@antonydjames They use .expand and .expanded interchangeably, so really the code should be...

.button {
  &.expand, &.expanded {
    td:not(.expander) {
      width: 100%;
    }
  }
}

davidhouweling on 5 May 2016

🎉1

Also experiencing this on 2.1

bc-ian on 11 May 2016

@RonTL Awesome that you have a working solution!

Dave will contact you about the course today with more details!

rafibomb on 13 May 2016

@davidhouweling I wonder than if we just remove the expander from the table surrounding the button is a good solution or simply overriding with CSS. This would really affect anything that is supposed to be 100% width where the .expander is not necessary.

For reference, this is happening with <hr>'s as well - https://github.com/zurb/foundation-emails/issues/434

Thoughts on the approach?

rafibomb on 13 May 2016

In my opinion we should keep the code as clean as possible, so if removing resolves the problem, then great.

davidhouweling on 17 May 2016

They are also missing height in Outlook. The background color only covers the text, no padding or anything else.

I can post some images if it helps.

elliottregan on 19 May 2016

Is there a PR for this, or should I do it?

elliottregan on 9 Jun 2016

There has a merged PR to be able to remove the expander manually using a no-expander attribute. Think this particular one can be solved in Inky by removing the expander in Inky in the case of the .expanded

This is where it can be removed: https://github.com/zurb/inky/blob/develop/lib/componentFactory.js#L46
and in the tests

@elliottregan Are you able to PR this one?

rafibomb on 16 Jun 2016

@davidhouweling @elliottregan Are you to remove this as a PR? We'll be happy to merge it in!

rafibomb on 24 Jun 2016

Yea, I think I can get to that this weekend.

elliottregan on 24 Jun 2016

Any news on the PR, @elliottregan? Thanks :)

Stadly on 20 Sep 2016

This works .button.expand { td:not(.expander) { width: 100%; } } thanks to @RonTL for the solution. Can you submit a PR to add this to _buttons.scss?

rafibomb on 3 Oct 2016

In my tests, this fix seems to break Outlook 2016. The button becomes far too wide. Does anyone else experience this?

Stadly on 3 Oct 2016

It becomes far too wide because the table.button has a property width: auto
To fix, add:

table.button.expand, table.button.expanded {
  width: 100%;
}

That seems to fix the button to become crazy big!

oscb on 12 Oct 2016

@oscb Yes, but then it becomes narrow again, and not expanded. Or do you get a different result?

Stadly on 20 Oct 2016

@Stadly I could get the expanded buttons to work that way (adding my snippet and the one above).

.button {
  &.expand, &.expanded {
    td:not(.expander) {
      width: 100%;
    }
  }
}
table.button.expand, table.button.expanded {
  width: 100%;
}

Maybe I'm missing another change that I made. I'll take a look.

oscb on 21 Oct 2016

@oscb When using both snippets, the buttons are still too wide in my tests.

Stadly on 27 Oct 2016

@Stadly use full button declaration (not Inky) and add width="100%" attribute to the button table. Solved the problem for me in Outlook 2010 and Outlook 2013.

eolant on 9 Nov 2016

Now I've done some proper testing, and it turns out that it is the !important declaration that breaks Outlook. I have created a pull request that fixes the issue. Basically, it just removes the !important declaration from the width: 100% rule for table.button.expand and table.button.expanded.

@eolant: The reason why width="100%" works is that Outlook converts it to style="width: 100%", overriding the already existing style="width: 100% !important". Nice one!

Another issue is that the cursor is not a pointer when hovering the expanded button, only when hovering the text. Can anyone find a fix for this?

Also, there is an issue with which parts of the button actually work like a link. It seems like the link works when clicking on the button text or to the left of the button text, while it doesn't work to the right of the button text. Kind of like this:
[ < link works here > Centered text on the button < link does not work here > ]

Stadly on 10 Nov 2016

The pull request has been merged, so unless people still are experiencing issues, this thread can probably be closed :)

Stadly on 22 Nov 2016

Experiencing this issue in 2.2. Reproducible from the included files with no modifications, after creating a foundation-cli emails project, using both the dev and production (foundation watch and foundation build) versions.

Grab the HTML from the Forgot Password demo email, paste it into putsmail.com, send it to yourself, open it in Outlook 2013 - the "Reset Password" button is small and left-aligned.

skelly-jbfc on 22 Feb 2017

👍1

@skelly-jbfc A new release has not been done after the merge, so to test it, you'll need to use the code in the develop branch. Or wait for the 2.2.2 release.

Stadly on 22 Feb 2017

Any word on when 2.2.2 will be released? It's been a while since the last release...

elliottregan on 7 Mar 2017

👍2

I'd be interested in knowing when a new release is coming as well. Working on the email templates today and encountered this and the margin-bottom issue. I'm working with the CSS templates and Zurb web inliner. Thx!

RachelRego on 7 Mar 2017

@eolant This works for me too <table width="100%" class="button expand">

Thanks!

JuanmaMenendez on 3 May 2017

Hi,
I have the same issue with foundation 2.2.5
The .expand class add "width:100%!important;" to the td. Outlook doesn't understand "!important".
If the .expand class only had "width:100%;" it would work !

Olimbot on 10 Dec 2018

While this issue does seem to be resolved do note that the wrapped link isn't the same width as the expanded button, meaning the user needs to click within the center of the button which to me presents a UX issue. I tried setting the link style to style="display: block; width: 100%" thinking it might expand out the element but no dice. My test case for this is simply the example code present for buttons at https://get.foundation/emails/docs/button.html.

Additionally at time of writing, the download link present here https://get.foundation/emails/docs/css-guide.html gives the user version 2.2.0 not version 2.3.1 which has the fix for expanded button, not sure if that was intentional or not.

DaleFoley on 12 Aug 2020

Additionally at time of writing, the download link present here get.foundation/emails/docs/css-guide.html gives the user version 2.2.0 not version 2.3.1 which has the fix for expanded button, not sure if that was intentional or not.

This is a Amazon S3 download link. Can you take a look at this @joeworkman?