<center></center> tags around a menu don't work anymore in gmail mobile

[bc-ian]

How can we reproduce this bug? Wrap a menu with the center tag.

Write out the HTML (or Inky code) that causes the issue.

<center>
   <menu>
     <item class="color-cream" href="#" target="_blank">Item 1</item>
     <item class="color-cream" href="#" target="_blank">Item 2</item>
     <item class="color-cream" href="#" target="_blank">Item 3</item>
   </menu>
</center>

What did you expect to happen? The menu should be centered on gmail on mobile/android.

What happened instead? The menu is left aligned.

What email clients does this happen in? Gmail mobile/android

It looks like there are now some extra tbody tags being added to the menu, thats the only big difference I can see. The data-parsed bit of code is now removed on inline as well. Reverting to a previous version of foundation for emails fixed the issue for me.

[DanielRuf]

Please provide an example repository as reproducible testcase so we can check this. Since when does this happen? Please provide the last working version where it worked.

[DanielRuf]

Maybe related: https://github.com/foundation/foundation-emails/commit/6da5f037d7cd12529be49041567bd89688351b1e

[bc-ian]

Version 2.2.1. is where centering works for me still. I just installed a fresh copy 2.3.1 today and tried to bust out an email and ran into the issue.

Oddly enough removing the tbodys worked to center a menu with text in it, but I also have a menu with images in it, and that one does not get centered when I remove the tbodys.

[DanielRuf]

Please provide an example repository as reproducible testcase so we can check this.

Also, does 2.3.0 work or is this also broken? See https://github.com/foundation/foundation-emails/releases/

We have merged many changes since 2.2.1. So we need further information to bisect this obvious regression.

[DanielRuf]

I guess the issue comes from inky: https://github.com/foundation/inky/blob/develop/lib/componentFactory.js#L108

https://github.com/foundation/inky/blame/develop/lib/componentFactory.js#L108

[bc-ian]

You know what Daniel, maybe I am a little confused actually. When I install F4E , either with foundation-cli, or with git clone https://github.com/zurb/foundation-emails-template project and then I go into the package.json, its says the dependencies for foundation-emails are ^2.2.1.

When I clone directly from the master using git clone https://github.com/foundation/foundation-emails.git I just get the docs.

Am I still installing correctly?

[DanielRuf]

I'm not sure I can follow. foundation/foundation-emails is the package but it is consumed by foundation/foundation-emails-template.

You want to use foundation/foundation-emails-template as the other will only install the devDependencies plus itself.

So cloning or installing foundation/foundation-emails-template is the correct approach.

[bc-ian]

I would be happy to help test the centering on 2.3 just not sure how to get that exact version of the project.

[DanielRuf]

Take a look into node_modules/foundation-emails/package.json or the package-lock.json file in the root folder of your project.

Or do you mean to install a specific version?

[bc-ian]

Yes if I want to install 2.3 and test the center tags there to see if they work around the menu or not. Would I just set the dependencies in my package.json for foundation emails to the exact version I want rather than ^2.2.1?

[DanielRuf]

^2.2.1 already picks the latest 2.x release. If needed you can change it to an exact value or run npm i [email protected].

[bc-ian]

Ok awesome that is what I thought. I will test this now.

[bc-ian]

Also broken in 2.3.0

Here is the inlined code for 2.3.0 vs the code for 2.2.1

The main differences I can see are the tbody getting added into the menu, as well as the css for padding being declared differently. Also the width declaration not having !important, as you alluded to in a previous post about issue 6da5f03

2.3.0

<center style="min-width:532px;width:100%">
  <table align="center" class="menu float-center"
    style="Margin:0 auto;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:center;vertical-align:top;width:auto">
    <tbody>
      <tr
        style="padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
        <td
          style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-wrap:break-word">
          <table
            style="border-collapse:collapse;border-spacing:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
            <tbody>
              <tr
                style="padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                <th class="menu-item float-center"
                  style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0 auto;border-collapse:collapse!important;color:#0a0a0a;float:none;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0 auto;padding:10px;padding-bottom:0;padding-left:0;padding-right:10px;padding-top:0;text-align:center;vertical-align:top;word-wrap:break-word">
                  <a href="#" target="_blank"
                    style="color:#2199e8;font-family:Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;padding:0;text-align:left;text-decoration:none">Item
                    1</a></th>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</center>

2.2.1

<center data-parsed style="min-width:552px;width:100%">
  <table align="center" class="menu float-center"
    style="Margin:0 auto;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:auto!important">
    <tr style="padding:0;text-align:left;vertical-align:top">
      <td
        style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#3a3639;font-family:Verdana,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
        <table
          style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
          <tr style="padding:0;text-align:left;vertical-align:top">
            <th class="menu-item float-center"
              style="Margin:0 auto;color:#3a3639;float:none;font-family:Verdana,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:10px;padding-right:10px;text-align:center">
              <a href="#" target="_blank"
                style="Margin:0;color:#063442;font-family:Verdana,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none">Item
                1</a></th>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</center>

[DanielRuf]

So 2.2.1 was the last known good version?

[bc-ian]

2.3.0 & 2.3.1 Not working 2.2.1 Working

My money is on that width=auto!important; being removed that you picked out earlier being the culprit.

[DanielRuf]

Can you test that? Because you say the markup changed. And it seems this could come from https://github.com/foundation/inky/commit/94643af718e3a2113c04ece21a6d5adf47c5b986

[DanielRuf]

The tbody was added as part of https://github.com/foundation/inky/pull/59 - so far this seems ok but the style changes could be the problem of the not working centering.

[nikitasol]

Can you please, check this PR: https://github.com/foundation/foundation-emails/pull/1015? With this PR the centring works correctly on gmail mobile, on iOS at least.