Buttons don't expand in Outlook 2013

[davidhouweling]

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

[davidhouweling]

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.

[RonTL]

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]

table and td, sorry...

[antonydjames]

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.

[tdhartwick]

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

[rafibomb]

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

[RonTL]

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.

[davidhouweling]

@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%;
    }
  }
}

[bc-ian]

Also experiencing this on 2.1

[rafibomb]

@RonTL Awesome that you have a working solution!

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

[rafibomb]

@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?

[davidhouweling]

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

[elliottregan]

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]

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

[rafibomb]

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]

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

[elliottregan]

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

[Stadly]

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

[rafibomb]

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?

[Stadly]

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

[oscb]

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!

[Stadly]

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

[oscb]

@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.

[Stadly]

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

[eolant]

@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.

[Stadly]

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]

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

[skelly-jbfc]

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.

[Stadly]

@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.

[elliottregan]

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