Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added data-attribute no-expander to <columns> to disable the .expander #29

Merged
merged 2 commits into from
May 18, 2016

Conversation

ghost
Copy link

@ghost ghost commented Apr 5, 2016

Added data-attribute no-expander to to disable the .expander.

Reason of adding:
To disable adding th.expander on a column when it has 12 size.
It breaks the full width images in the emails in MS outlook & MS live, setting the width of the cell 50%.

With this edit, you can disable the expander, by adding no-expander to
Example:
<columns large="12" small="12" no-expander>One</columns>
Results in:
`





One

` Tweet: https://twitter.com/ZURBfoundation/status/717019195112689664

Jack added 2 commits April 5, 2016 12:00
3 new test with no-expander on columns (case only empty Data-attribute no-expander, Data-attribute no-expander = false & Data-attribute no-expander = true)
@rafibomb
Copy link
Member

We talked about doing something like this. Like the way you made it an attribute. Can you share a code example use case we can test against to make sure this PR solves it?

@ghost
Copy link
Author

ghost commented Apr 20, 2016

<center class="topText">
  <p>Suspendisse in elit quam? <a href="http://domein.com" target="_blank">Suspendisse</a>  in elit quam.</p>
</center>
<container>
  <row class="collapse">
    <columns small="12" large="12">
      <img src="http://domein.com/img/welcome-header.jpg" alt="Sed rutrum volutpat lacus, ac pellentesque urna placerat sit amet. Vestibulum congue nisi vitae ipsum condimentum maximus." width="100%"/>
    </columns>
  </row>
  <row>
    <columns small="12" large="12"  width="100%">
      <p>Hi [naam],</p>
      <p><br>Sed rutrum volutpat lacus, ac pellentesque urna placerat sit amet. Vestibulum congue nisi vitae ipsum condimentum maximus.</p>
      <p><br>See you!</p>
      <p></p>
      <p><br>Our Team</p>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <img src="http://domein.com/img/logo.png" class="float-right" alt="Logo">
    </columns>
  </row>
  <row class="collapse">
    <columns small="12" large="12" class="small-bottom-padding">
      <img src="http://domein.com/img/lines.png" class="lines" width="580" height="35">
    </columns>
  </row>

</container>
<center class="bottomText">
  <p>Praesent scelerisque enim ligula, vitae pulvinar eros viverra eget. Integer congue felis nisi, at congue est gravida non.<br>
  Donec odio lacus, bibendum ut nunc vel, <a href="http://domein.com" target="_blank">vehicula eleifend ex.</a></p>
</center>

This is the mail we made. (all names of the company cleared.) On windows outlook (live) mail the images went to 50%;

With the addition:

<center class="topText">
  <p>Suspendisse in elit quam? <a href="http://domein.com" target="_blank">Suspendisse</a>  in elit quam.</p>
</center>
<container>
  <row class="collapse">
    <columns small="12" large="12" no-expander>
      <img src="http://domein.com/img/welcome-header.jpg" alt="Sed rutrum volutpat lacus, ac pellentesque urna placerat sit amet. Vestibulum congue nisi vitae ipsum condimentum maximus." width="100%"/>
    </columns>
  </row>
  <row>
    <columns small="12" large="12"  width="100%">
      <p>Hi [naam],</p>
      <p><br>Sed rutrum volutpat lacus, ac pellentesque urna placerat sit amet. Vestibulum congue nisi vitae ipsum condimentum maximus.</p>
      <p><br>See you!</p>
      <p></p>
      <p><br>Our Team</p>
    </columns>
  </row>
  <row>
    <columns small="12" large="12" no-expander>
      <img src="http://domein.com/img/logo.png" class="float-right" alt="Logo">
    </columns>
  </row>
  <row class="collapse">
    <columns small="12" large="12" class="small-bottom-padding" no-expander>
      <img src="http://domein.com/img/lines.png" class="lines" width="580" height="35">
    </columns>
  </row>

</container>
<center class="bottomText">
  <p>Praesent scelerisque enim ligula, vitae pulvinar eros viverra eget. Integer congue felis nisi, at congue est gravida non.<br>
  Donec odio lacus, bibendum ut nunc vel, <a href="http://domein.com" target="_blank">vehicula eleifend ex.</a></p>
</center>

Then it worked for 100% wide.

@rafibomb
Copy link
Member

Looking to pull this in for the next release. Here's the update:

Just published the Foundation for Emails 2.1 release blog post and the release went out this morning! We also started a discussion on the future of Inky and what amazing integrations can be made. I'm sure you have some comments, questions, or ideas: http://foundation.zurb.com/forum/posts/39717-architecting-the-future-of-foundation-for-emails

@rafibomb rafibomb added this to the 2.2.0 milestone May 18, 2016
@rafibomb rafibomb merged commit f4e0199 into foundation:master May 18, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant