foundation-emails

foundation-emails copied to clipboard

How can we reproduce this bug?

<container>

  <spacer size="16"></spacer>
  
  <row>
    <columns small="12">
      
      <h1>Hi, Susan Calvin</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?</p>
    </columns>
  </row>
  <wrapper class="secondary">

    <spacer size="16"></spacer>

    <row>
      <columns large="6">
        <h5>Connect With Us:</h5>
        <button class="facebook expand" href="http://zurb.com">Facebook</button>
        <button class="twitter expand" href="http://zurb.com">Twitter</button>
        <button class="google expand" href="http://zurb.com">Google+</button>
      </columns>
      <columns valign="bottom" large="6">
        <h5>Contact Info:</h5>
        <p>Phone: 408-341-0600</p>
        <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
      </columns>
    </row>
  </wrapper>
</container>

What did you expect to happen?

Contact info aligned with bottom

What happened instead?

Contact info aligned with top

The problem is scss/components/_normalize.scss line 85 as it hardcodes vertical-align: top; for every th and td. https://github.com/foundation/foundation-emails/blob/e64b4649a78ed265216ee43d079a5aa7fad2f647/scss/components/_normalize.scss#L85

If you can confirm that this is the cause, I created a PR #1002

The problem is scss/components/_normalize.scss line 85 as it hardcodes vertical-align: top; for every th and td.

This is meant to prevent issues where this is not the case as the elements do not align the content to the top by default. Changing this would be a breaking change.

I guess the problem is with the columns element, not the css. https://get.foundation/emails/docs/alignment.html#vertical-alignment

There might have been some regression, but not in the scss code which is unchanged for 5 years at this location:

https://github.com/foundation/foundation-emails/commit/395dead4a77118e0327fc9235eda465f5a2fb65b https://github.com/foundation/foundation-emails/blame/develop/scss/components/_normalize.scss#L85

See also https://github.com/foundation/foundation-emails/issues/526 https://github.com/foundation/foundation-emails/issues/842 https://github.com/foundation/foundation-emails/issues/571#issuecomment-246500738

Okay, but if you build the example above and inspect the applied css styles to the th than there is only one css rule applied to it regarding vertical-align. And that comes from _normalize.css. So maybe something was deleted in another file.

I changed the PR. Please have a look.

This issue has been mentioned on Foundation Open Source Community. There might be relevant details there:

https://foundation.discourse.group/t/foundation-emails-vertical-alignment-not-working/3139/3

I keep running into this.

I add the following to _template.scss which seems to override the default

th[valign="middle"] {
  vertical-align: middle;
}