Apex Code Development You need to sign in to do that
Don't have an account?
Don Pierce table alignment problem using deader and footer divs
I have setup an email template to handle headers and footers. The problem I have is the content inbetween will not align properly. I get an error when I try to use a div around the middle content and this appears to be due to the use of the apex:repeat code. I think it has to do with the css settings but have not been able to resolve.
Here is the code and I have attached the PDF rendered. I have a few extra lines in there as I have been testing.
<messaging:emailTemplate subject="Sales Order Invoice Geo" recipientType="User" relatedToType="rstk__FSOINVH__c">
<messaging:htmlEmailBody >
<html>
<head>
<style>
@page {
size:a4;
margin-left: 1.3cm;
margin-right: 0.4cm;
margin-top: 8.0cm;
margin-bottom: 4.5cm;
@top-left {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.header {
display: block;
padding: 1px;
position: running(header);
padding-top: 1.0cm;
}
div.footer {
display: block;
padding: 1px;
position: running(footer);
}
body, table, th, td, div {
font:normal normal 95%/1.0 arial, times new roman, verdana;
}
body {
counter-reset: pg -1;
}
table {
cell-padding: 0;
cell-spacing: 0;
}
#main {
width:690px;
background:#ffffff;
}
#cont {
display:block;
}
.headerSect {
width:700px;
}
.logoDiv {
height:56px;
width:220px;
}
.logoDiv img {
display: block;
height: 100%;
}
.cmpLogo {
max-height:66px;
max-width:250px;
}
.header2 {
width:400px;
border: 1px solid;
padding: 1px;
}
.formTitle {
float:left;
font-weight: bold;
font-size: 140%;
padding-left:4px;
}
.pageNumSect {
float:right;
counter-increment: pg;
}
div.pageNumSect:before {
content: "Page " counter(pg) " of " ;
}
.headerInfo {
margin-top:24px;
padding: 2px;
}
.hdrInfoLbl {
font-weight: bold;
}
.hdrInfoData {
font-weight: normal;
}
td {
padding: 2px;
}
.addressSect {
background-color: #000000;
width:700px;
margin-top:6px;
margin-right:2px;
}
.addressSect th {
text-align:center;
font-weight: bold;
background-color:#000000;
color:#ffffff;
padding: 2px;
}
.addressSect td {
background-color:#ffffff;
}
.termsSect {
width:700px;
margin-top:6px;
border: 1px solid;
}
.termsSect td {
vertical-align:top;
}
.termsSect td:nth-child(1) {
width: 17%;
font-weight: bold;
}
.termsSect td:nth-child(2) {
width: 33%;
}
.termsSect td:nth-child(3) {
width: 15%;
font-weight: bold;
}
.termsSect td:nth-child(4) {
width: 35%;
}
table.lines {
width:700px;
table-layout:fixed;
background-color: #ffffff;
margin-top:6px;
border-top: 1px solid;
border-bottom: 1px solid;
border-right: 1px solid;
margin-left: auto;
margin-right:auto;
}
table.lines td {
background-color:#ffffff;
vertical-align:top;
padding: 1px;
border-left: 1px solid black;
}
table.lines th {
background-color:#000000;
color:#ffffff;
padding: 0px 0px 0px 0px;
text-align:center;
font-weight:bold;
}
table.footerSect {
width:700px;
margin-top:6px;
margin-right:2px;
border-top: 1px solid;
border-bottom: 1px solid;
border-right: 1px solid;
}
table.footerSect td {
margin-top: 6px;
border-left: 1px solid black;
}
table.footerSect td td {
border: none;
}
//230
.totalLabel {
font-weight: bold;
width: 90px;
}
.totalAmt {
text-align:right;
width: 140px;
}
.totalSect td {
border: 0;
}
.shippingComments {
font-weight:bold;
}
table.lines tr.lines_content_row td.col_description {
text-align:left;
font-weight:bold;
text-overflow:ellipsis;
padding-left: 1em;
white-space: wrap;
font-size:8pt;
color:blue;
}
table.lines tr.lines_content_row td.col_comment {
text-align:left;
font-style:italic;
padding-left: 1em;
text-overflow:ellipsis;
}
table.lines tr.lines_content_row td.col_empty {
text-align:left;
color: #ffffff;
}
table.lines tr.lines_content_row td.col_serial {
text-align:left;
padding-left: 1em;
text-overflow:ellipsis;
}
table.lines tr.lines_content_row td.col_component {
text-align:left;
padding-left:1em;
text-overflow:ellipsis;
}
table.lines tr.lines_content_row td.col_product{
text-align:left;
text-overflow:ellipsis;
}
table.lines tr.lines_content_row td.col_uom {
text-align:center;
font-size:8pt;
}
table.lines tr.lines_content_row td.col_shipper {
text-align:center;
}
table.lines tr.lines_content_row td.col_tax {
text-align:center;
}
table.lines tr.lines_content_row td {
text-align:right;
overflow:hidden;
text-overflow:clip;
white-space:nowrap;
}
table.lines {
padding-bottom: {!38 - relatedTo.rstk__numLines__c}em;
}
.wrapper{position:relative;}
.right,.left{width:50%; position:absolute;}
.right{right:0;}
.left{left:0;}
</style>
</head>
<body>
<div id="main">
<!--apex:repeat value="{pages}" var="page"-->
<div class="header">
<div class="headerSect">
<table cellspacing="0" cellpadding="0" border="1">
<tr><td valign="middle" width="300px">
<div class="logoDiv">
<!-- <apex:image height="48px" width="204px" value="{!relatedTo.rstk__companylogo__c}" rendered="{!!ISBLANK(relatedTo.rstk__companylogo__c)}"/>-->
<apex:image styleClass=".cmpLogo" value="{!relatedTo.rstk__companylogo__c}" rendered="{!!ISBLANK(relatedTo.rstk__companylogo__c)}"/>
</div>
</td><td width="400px">
<!-- <div class="header2">-->
<div class="formTitle">Sales Invoice</div>
<div class="pageNumSect">{!relatedTo.rstk__pages__c}</div>
<apex:panelGrid styleClass="headerInfo" columnClasses="hdrInfoLbl,hdrInfoData" columns="2" width="100%">
<apex:outputText value="Invoice Number"/>
<apex:outputText value="{!relatedTo.rstk__invoiceno__c}"/>
<apex:outputText value="Invoice Date"/>
<apex:outputText value="{0,date,short}">
<apex:param value="{!relatedTo.rstk__invdate__c}"/>
</apex:outputText>
<apex:outputText value="Sales Order Number"/>
<apex:outputText value="{!relatedTo.rstk__order__c}"/>
<apex:outputText value="Customer PO Number"/>
<apex:outputText value="{!relatedTo.rstk__custpo__c}"/>
</apex:panelGrid>
<!-- </div> -->
</td></tr></table>
</div>
<table border="0" cellspacing="0" cellpadding="0" class="lines" style="float:left">
<tr class="lines_header_row">
<th width="4%" >Line</th>
<th width="44%">Product</th>
<th width="4%" >UOM</th>
<th width="12%">Shipper</th>
<th width="7%" >Quantity</th>
<th width="9%" >Unit Price</th>
<th width="7%" >Discount</th>
<th width="10%">Extension</th>
<th width="3%" >Tax</th>
</tr></table>
</div>
<div class="footer">
<table class="footerSect" cellpadding="5" cellspacing="0" border="1">
<tr><td>
<apex:outputText value="These items are controlled by the U.S. Government and authorized for export only to the country of ultimate destination for use by the ultimate consignee or end-user(s) herein identified. They may not be resold, transferred, or otherwise disposed of, to any other country or to any person other than the authorized ultimate consignee or end-user(s), either in their original form or after being incorporated into other items, without first obtaining approval from the U. S. government or as otherwise authorized by the U. S. law and regulations."/>
</td></tr>
</table>
</div>
<table border="0" cellspacing="0" cellpadding="0" class="lines" style="float:left">
<tr>
<th width="4%" >Line</th>
<th width="44%">Product</th>
<th width="4%" >UOM</th>
<th width="12%">Shipper</th>
<th width="7%" >Quantity</th>
<th width="9%" >Unit Price</th>
<th width="7%" >Discount</th>
<th width="10%">Extension</th>
<th width="3%" >Tax</th>
</tr>
<apex:repeat var="l" value="{!relatedTo.rstk__lines__r}">
<tr class="lines_content_row">
<apex:variable var="isSpanRow" value="{!l.rstk__linetype__c='Description'}" />
<!-- Description Panel - Spans Across Table -->
<apex:outputPanel layout="none" rendered="{! isSpanRow }">
<!-- Blank Line Number Column -->
<td></td>
<!-- Description Column -->
<td class="col_description" colspan="8" >{!l.rstk__comment__c}</td>
</apex:outputPanel>
<!-- Standard Panel - No Spans -->
<apex:outputPanel layout="none" rendered="{! !isSpanRow }">
<!-- Line Number Column -->
<td class="col_lineno">{!l.rstk__invline__c}</td>
<!-- Product Column -->
<apex:variable var="productClass" value="{! 'col_product' + IF(l.rstk__linetype__c='Empty',' col_empty','') + IF(l.rstk__linetype__c='Detail', '', '') + IF(l.rstk__linetype__c='Prepayment','','') + IF(l.rstk__linetype__c='PrepaymentApplied','','') + IF(l.rstk__linetype__c='Comment',' col_comment', '') + IF(l.rstk__linetype__c='Serial', ' col_serial', '') + IF(l.rstk__linetype__c='Component', ' col_component', '') }"/>
<apex:variable var="productDisplayVal" value="{! '' + IF(l.rstk__linetype__c='Empty', 'X', '') + IF(l.rstk__linetype__c='Detail', l.rstk__prod__c, '') + IF(OR(l.rstk__linetype__c='Prepayment', l.rstk__linetype__c='PrepaymentApplied', l.rstk__linetype__c='Comment', l.rstk__linetype__c='Serial'), l.rstk__comment__c, '') + IF(l.rstk__linetype__c='Component', l.rstk__component__c , '') }"/>
<td class="{!productClass}">
{!productDisplayVal}
</td>
<!-- Unit Of Measure Column -->
<td class="col_uom">{!l.rstk__uom__c}</td>
<!-- Shipper Column -->
<td class="col_shipper">{!l.rstk__shipper__c}</td>
<!-- Quantity Column -->
<td class="col_qty">
<apex:outputText value="{0,Number,###,###,###,##0.00}" rendered="{!OR(l.rstk__linetype__c='Detail',l.rstk__linetype__c='Prepayment')}">
<apex:param value="{!l.rstk__qty__c}"/>
</apex:outputText>
</td>
<!-- Unit Price Column -->
<td class="col_unitprice">
<apex:outputText value="{0,Number,###,###,###,##0.00}" rendered="{!l.rstk__linetype__c='Detail'}">
<apex:param value="{!l.rstk__price__c}"/>
</apex:outputText>
<apex:outputText value="{0,Number,###,###,###,##0.00}" rendered="{!l.rstk__linetype__c='Component'}">
<apex:param value="{!l.rstk__unitprice__c}"/>
</apex:outputText>
</td>
<!-- Discount Column -->
<td class="col_discount">
<apex:outputText value="{0,Number,###,###,###,##0.00}%" rendered="{!!ISBLANK(l.rstk__discpct__c)}">
<apex:param value="{!l.rstk__discpct__c}"/>
</apex:outputText>
</td>
<!-- Extension Column -->
<td class="col_extension">
<apex:variable var="isPrepaymentApplied" value="{! l.rstk__linetype__c='PrepaymentApplied' }"/>
<apex:variable var="extensionAmount" value="{! IF(isPrepaymentApplied, (l.rstk__price__c - l.rstk__discamt__c) * l.rstk__qty__c , (l.rstk__price__c - l.rstk__discamt__c) * l.rstk__qty__c )}"/>
<apex:outputText value="{0,Number,###,###,###,##0.00}">
<apex:param value="{!extensionAmount}"/>
</apex:outputText>
</td>
<!-- Tax Column -->
<td class="col_tax">
<apex:outputText value="{!IF(OR(relatedTo.rstk__taxexempt__c, l.rstk__taxexempt__c),'','Y')}" rendered="{!!ISBLANK(l.rstk__invline__c)}"/>
</td>
</apex:outputPanel>
</tr>
</apex:repeat>
</table>
<!--/apex:repeat-->
<table cellpadding="0" cellspacing="0" border="1" width="100%" style="float:left">
<tr><td width="460px" valign="top">
<div style="overflow:hidden;max-height:85px;"><apex:outputText escape="false" value="{!relatedTo.rstk__extcomment__c}"/></div>
</td>
<td width="240px">
<apex:panelGrid styleClass="totalSect" columnClasses="totalLabel,totalAmt" columns="2" width="240px" >
<apex:outputText value="SubTotal"/>
<apex:outputText value="{0,Number,###,###,###,###,##0.00}">
<apex:param value="{!relatedTo.rstk__total__c}"/>
</apex:outputText>
<apex:outputText value="Discount" rendered="{!AND(!ISNULL(relatedTo.rstk__discamt__c), relatedTo.rstk__discamt__c>0)}"/>
<apex:outputText value="({0,Number,###,###,###,###,##0.00})" rendered="{!AND(!ISNULL(relatedTo.rstk__discamt__c), relatedTo.rstk__discamt__c>0)}">
<apex:param value="{!relatedTo.rstk__discamt__c}"/>
</apex:outputText>
<apex:outputText value="Shipping"/>
<apex:outputText value="{0,Number,###,###,###,###,##0.00}">
<apex:param value="{!relatedTo.rstk__freightamt__c+relatedTo.rstk__handlingamt__c+relatedTo.rstk__packageamt__c}"/>
</apex:outputText>
<apex:outputText value="Tax"/>
<apex:outputText value="{0,Number,###,###,###,###,##0.00}">
<apex:param value="{!relatedTo.rstk__taxamt__c}"/>
</apex:outputText>
<apex:outputText value="Prepayment"/>
<apex:outputText value="({0,Number,###,###,###,###,##0.00})">
<apex:param value="{!relatedTo.rstk__totalppya__c}"/>
</apex:outputText>
<apex:outputText value="Invoice Total"/>
<apex:outputText value="{0,Number,###,###,###,###,##0.00}">
<apex:param value="{!relatedTo.rstk__grandtotal__c - relatedTo.rstk__totalppya__c}"/>
</apex:outputText>
</apex:panelGrid>
</td></tr>
</table>
</div>
</body>
</html>
</messaging:htmlEmailBody>
</messaging:emailTemplate>
Don PierceHere is the results of the pdf render. Please excuse I had to remove the soldto and contact table code as I could not post all the code due to character limitation.