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.
Related
I must repair a bug on the emails sent by my company when a new customer's account is created for the website, it must show a HTML <a> tag with the link to go on the new account, but in Gmail and Outlook, this <a> tag does not appear.
The code just here:
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-top: 30px; padding-bottom: 30px;
word-break: break-word;" align="center">
<table style="border-collapse: separate; line-height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: none; border-radius: 37px; cursor: auto; mso-padding-alt: 10px 25px;
background: #5F9AB0;" align="center" valign="middle" bgcolor="#5F9AB0"> Demander mon mot de passe
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Screenshot of expected result (actual when I read my mail with the Mail mac app)
Screenshot of the display of the mail in Chrome and Firefox using Gmail and Outlook webapp
#Syfer suggested email queries are involved. If they are, check out https://www.caniemail.com/search/?s=media.
That says support for media queries is absent or spotty for all Gmails, all the Outlooks (except for the one that uses Apple Mail), all Yahoo's, all AOL's, and others.
Ain't it grand writing email HTML? 😁
I am using Angular 1.6. I have a dynamic table for which I have to freeze the header and left 3 columns. Please Help if there is any directive to do the same. I have tried all options available in net using CSS and jquery plugin but in vein. Please help
div {
width: 300px;
overflow-x:scroll;
margin-left:50px;
overflow-y:visible;
padding-bottom:1px;
}
td {
padding: 0 40px;
}
table tr td:first-child{
position:absolute;
width:50px;
left:0;
}
<div>
<table>
<tr>
<td></td>
<td>Walter</td>
<td>Mike</td>
<td>Nancy</td>
</tr>
<tr>
<td>Age</td>
<td>30</td>
<td>20</td>
<td>10</td>
</tr>
<tr>
<td>Gender</td>
<td>Male</td>
<td>Female</td>
<td>Male</td>
</tr>
<tr>
<td>Company</td>
<td>ABC</td>
<td>BBC</td>
<td>BFG</td>
</tr>
</table>
</div>
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 am creating a footer in a PDF document using <cfdocumentitem type="footer"> and it is working fine. Except that I cannot seem to control the font. I have tried <span>, <font face> etc. with no luck. Currently I am trying a table with class as below.
Anyone know how to control the font look in a footer with <cfdocumentitem>?
<cfdocument format="pdf"
marginBottom = ".5"
marginLeft = ".4"
marginRight = ".4"
marginTop = ".2"
>
<style type="text/css">#import "pdf.css";</style>
<cfdocumentitem type="footer">
<cfoutput>
<table width=100%>
<tr>
<td class=verd10>
<b>#pdfstuff.pdffinal#</b>
</td>
<td align=right class=verd10 valign=top>
Page #cfdocument.currentPageNumber# of #cfdocument.currentPageNumber#
</td>
</tr>
</table>
</cfoutput>
</cfdocumentitem>
pdf document data etc
</cfdocument>
Try adding a copy of the stylesheet link inside the footer, like so:
<cfdocumentitem type="footer">
<style type="text/css">#import "pdf.css";</style>
<cfoutput>
<table>
... etc
</table>
</cfoutput>
</cfdocumentitem>
Welcome to cfdocument. The only way I have been able to successfully format any text in the footer is to use a combination of html and inline styles.
Here is a footer that works for me:
<cfdocumentItem type="footer">
<table width="100%">
<tr>
<td style="font-family:Arial; font-size: 9pt;">Printed On: #dateFormat(now(), "mm/dd/yyyy")# #timeFormat(now(), "HH:MM")#</td>
<td style="font-family:Arial; font-size: 9pt;" align="right">Page #cfdocument.currentPageNumber# of #cfdocument.totalPageCount#</td>
</tr>
</table>
</cfdocumentItem>
I got a coldfusion query where the result is grouped on country names. With a click on this one, I try to open or close the list under the country. But i cannot work correctly with this siblings and this parents. The result is, if i click on a country name, the fourth one, for example, it close all childrens, and the three country name which are before too.
Can someone help me to choose the right selectors ?
Thank you in advance ,
Michel
The code:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var toggleMinus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_minus.png';
var togglePlus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_plus.png';
var $subHead = $('table#categorylist tbody th:first-child');
$subHead.prepend('<img src="' +toggleMinus+ '" alt="collapse this section" /> ');
$('img', $subHead).addClass('clickable').click(function(){
var toggleSrc = $(this).attr('src');
if(toggleSrc == toggleMinus){
$(this).attr('src',togglePlus).parents('.country').siblings().fadeOut('fast');
}else{
$(this).attr('src',toggleMinus).parents('.country').siblings().fadeIn('fast');
}
});
});
</script>
<table width="95%" border="0" cellspacing="2" cellpadding="2" align="center id="categorylist">
<thead>
<tr>
<th class="text3" width="15%">
<cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODENUMBER">
</th>
<th class="text3" width="15%">
<cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODE">
</th>
<th class="text3" width="55%">
<cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_NAME">
</th>
<th class="text3" width="15%">
<cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTIVE">
</th>
</tr>
</thead>
<tbody id="content">
<cfoutput query="qryCategoryUrl" group="country_name" groupcasesensitive="false">
<tr class="country">
<th style="font-weight:bold; text-align:left;" colspan="4">#country_name#</th>
</tr>
<cfoutput>
<tr>
<td valign="top" class="text3">#Replace(ACTOR_CODENUMBER, Chr(13) & Chr(10), "<br>", "ALL")# </td>
<td valign="top" class="text3">#Replace(ACTOR_CODE, Chr(13) & Chr(10), "<br>", "ALL")# </td>
<td valign="top" class="text3">#Replace(ACTOR_NAME, Chr(13) & Chr(10), "<br>", "ALL")# </td>
<td valign="top" class="text3"><cfmodule template="../custom_tags//get_message.cfm" keyName="#ACTIVE_display(qryCategoryUrl.ACTIVE)#"></td>
</tr>
</cfoutput>
</cfoutput>
</tbody>
</table>
Instead of:
.parents('.country').siblings().fadeOut('fast');
Try this:
.closest('.country').nextUntil('.country').fadeOut('fast');
And of course, apply the same change to the .fadeIn(). You might also look into .fadeToggle()docs.
Here's a (reduced) example: http://jsfiddle.net/redler/5sqJz/. While it doesn't affect the example, presumably you would be setting the initial state of those detail rows as hidden.
woah all that cfmodule usage, cfmodule can be a memory hog.
Although what I always recommend is that people try their pages in whatever browser, and use the SelectorGadget bookmarklet at http://www.selectorgadget.com/
This makes it easier to test and check the correct selector, for your app needs.