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

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

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 5
Comments: 35 (15 by maintainers)

Most upvoted 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%;
  }
}

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 May 3, 2016

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

elliottregan on Mar 7, 2017

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 Feb 22, 2017

@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 May 4, 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 May 4, 2016