CODEWITHSUNDEEP
htmlcsszurb-foundationhtml-email
D. Foley
D. Foley

Reputation: 1079

Foundation Email Expanded Button Within Basic Grid

EDIT: The following outlined example works in thunderbird as well.

I'm currently learning how to create emails using foundation for emails. What I currently want to do is to create an "expanded button" within a grid. I've come up with the following HTML by referencing the examples outlined for grid here and examples outlined for expanded button here.

The following is what I came up with, my thinking based on what I have read thus far is that I have to add the "expanded button" within the column of my grid, so I have the following HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Title</title>
    <link rel="stylesheet" href="css/foundation-emails.css" />
</head>
    <table align="center" class="container">
        <tbody>
        <tr>
            <td>
                <table class="row">
                    <tbody>
                    <tr>
                        <th class="columns first last">
                            <table>
                                <tr>
                                    <table class="row">
                                        <tbody>
                                        <tr>
                                            <column>
                                                <table class="button expanded">
                                                    <tr>
                                                        <td>
                                                            <table>
                                                                <tr>
                                                                    <td>
                                                                        <center data-parsed><a href="#"
                                                                                               align="center"
                                                                                               class="float-center">Reset Password</a>
                                                                        </center>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>
                                                <table class="button small-expanded">
                                                    <tr>
                                                        <td>
                                                            <table>
                                                                <tr>
                                                                    <td><a href="#">Expand small only</a></td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </column>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <th class="expander"></th>
                                </tr>
                            </table>
                        </th>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</html>

It looks exactly as I expect it to look like in Firefox, however it looks incorrect in outlook. For example, this is what it appears as in Firefox:

enter image description here

Here is what it looks like in outlook when I send an email:

enter image description here

For context, I'm trying to create an typical "Reset Password" email template. Do note that I have run the HTML through the CSS inliner located here, as instructed by the documentation.

Upvotes: 0

Views: 203

Answers (1)

D. Foley
D. Foley

Reputation: 1079

This issue is resolved in version 2.3.1, but their official download link was not updated to serve the latest version of the code, hence I spent time trying to resolve an issue that was already rectified. While the button is now expanded, there is an issue with the anchor link in outlook.

See https://github.com/foundation/foundation-emails/issues/415 for more information.

Upvotes: 0

Related Questions