I'm using a fresh installation of Foundation for Email, and have the following test set up:
<container>
<wrapper>
<row>
<columns large="5" valign="middle">
<img src="https://placehold.it/690x173" alt="Company Logo">
</columns>
<columns large="7" valign="middle">
<h4 style="margin-bottom: 0;" class="text-right small-text-center">Thanks for your order!</h1>
</columns>
</row>
</wrapper>
</container>
I expected the logo and the title to be vertically centered in their container. However, as you can see in the screenshot, there is extra white space at the bottom:
Even the example in the documentation seems to be working incorrectly. The items are not vertically aligned in the center of their container.
What am I missing here? Why doesn't the valign attribute function as the documentation suggests?
The _normalize.scss file applies vertical-align: top; to table, tr, td and th tags. This messes with the vertical alignment.
For this reason, you will need to add vertical-align: middle; to the tag as well:
<wrapper>
<row style="border: 1px solid black;">
<columns large="5" valign="middle" style="vertical-align: middle;">
<img src="https://placehold.it/690x173" alt="Company Logo">
</columns>
<columns large="7" valign="middle" style="vertical-align: middle;">
<h4 class="text-right small-text-center">Thanks for your order!</h1>
</columns>
</row>
</wrapper>
Padding and margins can influence the visual end result quite significantly too, but that's actually a separate issue from the vertical alignment of content within table cells.
I've not tested how well this fix will work in different devices/platforms however you can apply the below to your columns to remove the extra space in your row.
<wrapper>
<row style="border: 1px solid black;">
<columns large="5" valign="middle" style="padding-bottom: 0;">
<img src="https://placehold.it/690x173" alt="Company Logo">
</columns>
<columns large="7" valign="middle" style="padding-bottom: 0;">
<h4 style="margin: 0" class="text-right small-text-center">Thanks for your order!</h1>
</columns>
</row>
</wrapper>
Related
I hope someone can point me in the right direction on how to change the background color of a column in Zurb Foundation for Emails 2 while using the Sass version. Is there a way to set the background color for the column or row ?
I tried multiple things but for some reason cant apply a style to columns or row.
body,
html,
h4.topline {
text-align: center;
color: rgb(0, 255, 85);
background: red;
}
p.value {
text-align: center;
color:indigo;
font-weight: bold;
background: greenyellow
}
div.test{
background: greenyellow
}
.columns.descr {
text-align: center;
color: gainsboro;
font-weight: bold
}
.row.test{
border-width: thick;
border-color: aqua
}
</style>
<container class="body-notify">
<row>
<columns small="12" large="12" >
<spacer size="10"></spacer>
<h4 class="topline">Information</h4>
</columns>
</row>
<row>
<div class="test">
<columns class="descr" small="12" large="6">Description 1</columns>
</div>
<columns small="12" large="6"><p class="value">Value 1</p></columns>
</row>
<row>
<columns small="12" large="6">Description 1</columns>
<columns small="12" large="6"><p class="value">Value 2</p></columns>
</row>
</container>
I work last year on the email marketing and I know some things , you can't add any style of css in email styles. so I think you can add background color inline on your div like this :
<div class="row" style="backgound:red;"></div>
A bit late on this, but hopefully it will still help! The columns element is part of the Inky templating markup and if you inspect it in the browser you'll see that this is actually a <th> element with the class name columns. So you should be able to target it with th.columns:
th.columns.descr {
text-align: center;
color: gainsboro; font-weight: bold }
Similarly, <row> in html markup is a table element so try table.row { add css here }
Also be wary of using <div> tags in html emails - they get stripped by some email clients. From the Foundation docs
When it comes to making emails, divs aren’t a thing. Don’t kill the messenger, but it’s true. It's not fun finding out we can't just use a with auto left and right margins for centering, or background colors; it won't work with most email clients. <div>'s can still be used for targeting CSS and for grouping semantically related elements, but shouldn’t be used for structural purposes or spacing.
You can use the <wrapper> element (also inky templating markup) instead. In actual html this is a table element with the class of wrapper, so if you needed to target this with sass it would be
table.wrapper
I am trying to have four single column width columns on large screens which are in the centre of the screen. I am using large-offset-4 to offset these columns by the equivalent of 4 columns but the positioning of these columns comes out quite a bit further to the right and the first column is larger than a single column should be.
I am running v2.2.1 of foundation for emails, the Sass version writing in Inky I have attempted multiple things but there appears to be some additional margin on the image in the first column which I haven't been able to override in sass. Everything looks as expected on small screens but on large the columns are not showing correctly. According to _grid.scss:101 the width of th.large-1 should be 32.33333px but it is displaying at 126.672px for the first column and 59px for all other columns.
<wrapper style="background: #ffffff">
<container>
<row>
<columns small="12" large="12" valign="middle" style="background: #ffffff;">
<h2 class="text-center">Connect with us</h2>
</columns>
</row>
<row>
<columns small="2" large="1" style="background: #ffffff;" class="large-offset-4 small-offset-2">
<img src="assets/img/facebook.png" alt="Facebook" title="Like us on Facebook." style="max-width: 40px; height: auto;">
</columns>
<columns small="2" large="1" style="background: #ffffff;" class="">
<img src="assets/img/twitter.png" alt="Twitter" title="Follow us on Twitter." style="max-width: 40px; height: auto;">
</columns>
<columns small="2" large="1" style="background: #ffffff;" class="">
<img src="assets/img/youtube.png" alt="YouTube" title="Find us on YouTube." style="max-width: 40px; height: auto;">
</columns>
<columns small="2" large="1" style="background: #ffffff;" class="">
<img src="assets/img/instagram.png" alt="Instagram" title="Follow us on Instagram." style="max-width: 40px; height: auto;">
</columns>
</row>
<row>
<columns small="1" large="1" valign="middle" class="large-offset-3">
<p><img src="assets/img/phone.png" style="max-width: 35px; height: auto;"></p>
</columns>
<columns small="5" large="2" valign="middle">
<p class="text-center">1800 067 066</p>
</columns>
<columns small="1" large="1" valign="middle">
<p class="text-right"><img src="assets/img/email.png" style="max-width: 35px; height: auto;"></p>
</columns>
<columns small="4" large="2" valign="middle">
<p class="text-center">Email us</p>
</columns>
</row>
</container>
Lines 9 - 22 should be producing four columns that are a single column wide that is offset by 4 columns (essentially centring them on twelve column grid) Each column should contain a small image (max-width of 40px) wrapped in an tag. Instead, the first column is about 4 columns wide and the content of it are in the centre of the screen, then all other columns are around 50px wide and to the right of the first column.
If my memory serves, the row needs to contain a total of 12 columns (including any offset).
so .large-1*2 + .large-2*2 + .large-offset-3 = 9 columns
Try taking up the last 3 columns on the right with an empty column of .large-3 to = 12
I have a master query that I output that gives me a list of sports. Then I have two sub queries that give me Query1: person information on who is in each sport, and Query2: Sport books the the people from query 1 have. I am trying to output a table row as a sort of header for each sport, then additional rows for the query data. I would like to break a page after every sport so I don't have a sport description row on the bottom of a page with the rest of the data on the next.
I have tried adding in every spot imaginable, but I always end up with blank pages equaling the recordcount of the getsports query at the beginning of the document.
Here is the code I am using. I have removed the actual query data. Does anyone have any suggestions or thoughts on what I am doing wrong?
<cfquery name="getterm" datasource="DS1">
select * from dbo.semester where current = 1
</cfquery>
<cfquery name="getsports" datasource="DS1">
SELECT * FROM [sports]
</cfquery>
<body>
<div id="wrap">
<cfinclude template="header.cfm">
<!-- header end -->
<div class="container" style="padding-top:0px;">
<cfdocument format="PDF" mimetype="application/pdf" orientation="landscape">
<table width="100%" cellspacing="0" cellpadding="0" topmargin="0" leftmargin="0" border="0" style="font-size:10px">
<tr>
<td colspan="8" bgcolor="#e3edef" style="padding-top:10px; padding-bottom:10px; padding-left:2px; font-family:Arial;" align="center">Books Not Issued -
<cfoutput>#yearOfSport#</h1>
</cfoutput>
</td>
</tr>
<cfoutput>
<cfloop query="getsports">
<tr>
<td colspan="8" style="padding-top:10px; padding-bottom:10px; padding-left:2px; font-family:Arial;" align="center">
<h1>#getsports.descr# </h1>
</td>
</tr>
<cfquery name="getbooks" datasource="DS1">
...
</cfquery>
<cfloop query="getbooks">
<cfquery name="getbooks2" datasource="DS1">
...
</cfquery>
<tr>
<td align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>ID</h4></td>
<td align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>Name</h4></td>
<td colspan="4" align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>Sport</h4></td>
</tr>
<tr>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#id#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#nameLast#, #nameFirst#, #nameMiddle# </td>
<td colspan="4" align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#sport#</td>
</tr>
<tr>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Class</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">ISBN</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Title</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Author</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Status</td>
</tr>
<cfloop query="getbooks2">
<tr>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.subject#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.ISBN#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.title#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.author#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.status#</td>
</tr>
</cfloop>
</cfloop>
</cfloop>
</cfoutput>
<cfdocumentItem type="footer">
<table width="100%" style="font-size:10px;">
<tr>
<td style="font-family:Arial;" align="left">
<cfoutput>Page #cfdocument.currentpagenumber# of #cfdocument.totalpagecount# - #dateformat(now(), "mm/dd/yyyy")#</cfoutput>
</td>
</tr>
</table>
</cfdocumentItem>
</div>
</table>
</cfdocument>
</div>
<!-- Container end -->
<div id="push"></div>
</div>
<cfinclude template="footer.cfm">
</body>
Disclaimer: I have no idea what is in those header and footer files..but the header and footer is outside of the cfdocument tag. I usually don't do that but maybe there is a reason why you do.
In order to get my breaks in looping data I add this (below) to the end of my loops, and sometimes I add a counter incase I need more surgical control.
<div style="page-break-before:always"> </div>
And it just works.
If you need to get some precision. I would run your page without the cf document and get the source output from the browser and start to figue what you need, don't need and where you want your breaks to occur.
Then take that and just wrap cfdocument around the raw HTML output and see if you get the desired effects.
If you data is enourmous, then grab a subset so limit your results so you can manage a smaller chuck of that report.
One other things I do for my sanity.
I use cfsavecontent and set all my HTML output to a variable and then stuff it into cfdocument so I am not mixing-it-up so to speak...
Example:
<cfsavecontent variable="buildUpReport">
<cfinclude template="header.cfm">
nested looping ad nauseum...
<div style="page-break-before:always"> </div>
more ad nauseum looping...
<cfinclude template="footer.cfm">
</cfsavecontent>
<cfdocument localUrl="yes"
format="PDF"
mimetype="text/html"
marginbottom="0.15"
margintop="0"
marginright="0"
marginleft="0">
<cfoutput>#buildUpReport#</cfoutput>
<cfdocumentitem type="footer" evalatprint="true">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td align="center">
<cfoutput>
#cfdocument.currentpagenumber# of
#cfdocument.totalpagecount# |
#dateformat(now(),"mm-dd-yyyy")#
</cfoutput>
</td></tr>
</table>
</cfdocumentitem>
</cfdocument>
Thanks for the suggestions. I ended up including additional table tags inside my main output. Once I did that the page breaks worked correctly. I think the way I was doing it before was breaking the table structure.
I'm just starting out with foundation and its really powerful.
Is there a way to make the right cell go above the left cell when the responsive design is actioned? Currently the image goes beneath, but I'd like it to go above.
Is this possible?
I've tried (as you can see below, switching the "first" and "last" classes, but this does not work.
<table class="row">
<tr>
<th class="small-12 large-7 last columns" style="font-size:12px !important;padding-left:30px !important;color:#414141 !important">
<span style="font-size:20px;color:#0171c5">
This is a title about things in this email and things</span>
<br /><br />
Test
<br />
<br />
Read More
</th>
<th class="small-12 large-5 first columns" style="padding:0px 0px 0px 6px !important;text-align:center">
<img src="images/2nd-image.jpg" style="max-width:100%;height:auto;margin-left:auto" />
</th>
</tr>
</table>
I have a small UI problem when trying to set a long sentence in glass, it displays like that:
Does anybody have an idea of wrapping the sentence to the next line? word wrap css code didn't work.
HTML Code:
<article>
<section>
<h1>Notes:</h1>
<ol class="text-x-small">
<li>Don't take the green one</li>
<li>Don't forget to check about the promotion we have tomorrow</li>
</ol>
</section>
<footer>
<p>Notes</p>
</footer>
</article>
Thanks for helping.
If you look here you'll find the default glass CSS. If you look under the lists section you'll find this gem:
ul li, ol li {
border-bottom: 1px solid #333;
padding: 6px 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
I'm not sure if you can include custom CSS styles in your HTML. If you can do something like this:
<article>
<style>
.wrap-li {
white-space: normal;
text-overflow: clip;
overflow: visible;
}
</style>
<section>
<h1>Notes:</h1>
<ol class="text-x-small">
<li class="wrap-li">Don't take the green one</li>
<li class="wrap-li">Don't forget to check about the promotion we have tomorrow</li>
</ol>
</section>
<footer>
<p>Notes</p>
</footer>
</article>
If the API doesn't accept defining styles in this way, you'd have to try to do this inline. Each li element would need to be:
<li style="white-space:normal;text-overflow:clip;overflow:visible">Don't take the green one</li>
I don't know if it is possible to wrap the text if it is too long with ol/li params. But you can make it with a table definition if you want:
<article>
<section>
<h1>Notes:</h1>
<table class="text-x-small">
<tbody>
<tr>
<td>
Don't take the green one
</td>
</tr>
<tr>
<td>
Don't forget to check about the promotion we have tomorrow
</td>
</tr>
</tbody>
</table>
</section>
<footer>
<p>Notes</p>
</footer>
</article>
Output: