Apex Code Development You need to sign in to do that
Don't have an account?
Ann21 what is causing the page break in VF page rendered pdf
Hi,
I have a VF page which is used to render a pdf doc.
This pdf is generated on the Opp object, in japaneese(UNICODE).
When the pdf is generated without Products to be added on the Opp object it looks ok, but when products are added (number of items is not fixed) there is a page break on the first page, pushing basically almost everything on the second page.(starting with the <!-- TY Contact --> )
I have the same VF page for not unicode and it works perfectly, so I am thinking, are the japaneese characters causing this break?
Any thought on where to look is highly appreciated!
Thanks,
Ana
I have a VF page which is used to render a pdf doc.
This pdf is generated on the Opp object, in japaneese(UNICODE).
When the pdf is generated without Products to be added on the Opp object it looks ok, but when products are added (number of items is not fixed) there is a page break on the first page, pushing basically almost everything on the second page.(starting with the <!-- TY Contact --> )
I have the same VF page for not unicode and it works perfectly, so I am thinking, are the japaneese characters causing this break?
Any thought on where to look is highly appreciated!
Thanks,
Ana
<apex:page id="PDF_ProposalOrderForm_V2_2"
controller="PDF_ProposalOrderForm_Controller"
standardStylesheets="False"
sideBar="False"
language="{!pdfLanguage}">
<apex:stylesheet value="{!URLFOR($Resource.PDF_TYOfferTemplate)}"/>
<apex:stylesheet value="{!URLFOR($Resource.PDF_TYOfferTemplate_UNICODE)}"/>
<!--/*DISPLAY TEMPLATE RELATED PROPERTIES*/
<div class="xx-small">
<apex:outputText value="Template Id: {!pdfTemplateId}"/><br/>
<apex:outputText value="Language: {!pdfLanguage}"/><br/>
<apex:outputText value="Date Format: {!pdfDateFormat}"/><br/>
<apex:outputText value="Number Format: {!pdfNumberFormat}"/><br/>
<apex:outputText value="Local Language: {!pdfLocalLanguage}"/><br/>
</div>-->
<apex:pageMessages escape="false"/>
<apex:form id="ProposalForm">
<!--*********************************************************************************************************-->
<!-- Header -->
<!--*********************************************************************************************************-->
<div id="header" class="header al-right">
<apex:image url="{!$Resource.PDF_ProposalOrderFormLogo}" width="200" height="55"/>
</div>
<!--*********************************************************************************************************-->
<!-- Footer -->
<!--*********************************************************************************************************-->
<div id="footer" class="footer al-left">
<div class="al-right x-small">Page <span class="pagenumber"/> of <span class="pagecount"/></div>
<div>
<div class="line bg-blue" style="width:70%;"></div>
<div class="line bg-red" style="width:10%;"></div>
<div class="line bg-yellow" style="width:10%;"></div>
<div class="line bg-green" style="width:10%;"></div>
</div>
<br/>
<apex:outputText value="{!pdfFooter}" escape="false" />
</div>
<!--<div class="spacer"></div>-->
<!--*********************************************************************************************************-->
<!-- Customer -->
<!--*********************************************************************************************************-->
<div id="customer" class="content">
<h1>{!opportunity.PDFProposalEntityName__c}</h1>
<apex:outputText value="{!proposalEntityAddress}" escape="false" />
</div>
<!--<div class="spacer"></div>-->
<!--*********************************************************************************************************-->
<!-- Proposal intro-->
<!--*********************************************************************************************************-->
<div id="proposal-intro" class="content">
<p class="spaced al-left">
<apex:outputField value="{!primaryContactRole.Contact.Salutation}" />
{!primaryContactRole.Contact.FirstName}
{!primaryContactRole.Contact.LastName}
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_IntroSalutation}" escape="false"/>,
</p>
<p class="al-justify">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_IntroContent}" escape="false"/>
</p>
</div>
<!--*********************************************************************************************************-->
<!-- TY Contact -->
<!--*********************************************************************************************************-->
<div id="ty-contact" class="content">
<div id="contact-left" class="content-left">
<h3 class="al-left">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_PersonalContact}" escape="false"/>
</h3>
<div style="display: inline-block;">
<apex:image styleClass="talk-bubble tri-right btm-left" style="float:left;" url="{!owner.FullPhotoUrl}" rendered="{!pdfShowOwnerPhoto}"/>
<div style="float:left;">
<p class="al-left">
<span class="contact__firstname">{!owner.FirstName}</span>
<span class="contact__lastname">{!owner.LastName}</span>
</p>
<p class="al-left">
<span class="contact__title">{!owner.Title}</span>
</p>
<p class="al-left">
<span class="contact__phone">{!owner.Phone}</span>
</p>
<p class="al-left">
<span class="contact__email"><a href="mailto:[OwnerEmail]">{!owner.Email}</a></span>
</p>
</div>
</div>
</div>
<div id="contact-right" class="content-right">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_ServiceContact}" escape="false" />
</div>
</div>
<!--*********************************************************************************************************-->
<!-- Key Benefits -->
<!--*********************************************************************************************************-->
<div id="key-benefits" class="content">
<div class="shade">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_KeyBenefits}" escape="false"/>
</div>
</div>
<!--*********************************************************************************************************-->
<!-- Offer Details -->
<!--*********************************************************************************************************-->
<div id="offer" class="content">
<table>
<thead>
<tr>
<th width="60%" class="al-left">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_Offer_OfferDetails}" escape="false" />
</th>
<th width="10%" class="al-center">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_Offer_Quantity}" escape="false" />
</th>
<th width="15%" class="al-right">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_Offer_UnitPrice}" escape="false" />
</th>
<th width="15%" class="al-right">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_Offer_Subtotal}" escape="false" />
</th>
</tr>
</thead>
<tbody>
<apex:repeat var="lineitem" value="{!opportunityProducts}">
<tr>
<td class="al-left al-top">
<p class="bold small">{!lineitem.ProductName}</p>
<div>
<ul class="x-small">
<apex:outputText value="{!lineitem.ProductStandardDescription}" escape="false" />
<li>{!lineitem.ProductDescription}</li>
</ul>
</div>
</td>
<td class="al-center al-top">
<p class="bold small al-center">{!lineitem.Quantity}</p>
</td>
<td class="al-right al-top">
<p class="bold small al-right">{!lineitem.UnitPrice} {!opportunity.CurrencyIsoCode}</p>
</td>
<td class="al-right al-top">
<p class="bold small al-right">{!lineitem.TotalPrice} {!opportunity.CurrencyIsoCode}</p>
<apex:outputText rendered="{!lineitem.Discount != ''}" value="{!$Label.PDF_ProposalOrderForm_Offer_Discount} " styleClass="x-small al-right"/>
<apex:outputText rendered="{!lineitem.Discount != ''}" value="{!lineitem.Discount}%" styleClass="x-small al-right"/>
<!--/*DISPLAY SELLER DISCOUNT VS. TOTAL DISCOUNT ON PROPSOAL*/
<apex:outputText rendered="{!lineitem.TotalDiscount != ''}" value="{!$Label.PDF_ProposalOrderForm_Offer_Discount} " styleClass="x-small al-right"/>
<apex:outputText rendered="{!lineitem.TotalDiscount != ''}" value="{!lineitem.TotalDiscount}%" styleClass="x-small al-right"/>
-->
</td>
</tr>
</apex:repeat>
</tbody>
<tfoot>
<tr>
<th colspan="2" class="al-left">
<p class="bold">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_Offer_TotalCost}" escape="false" />
</p>
</th>
<th colspan="2" class="al-right">
<p class="al-right bold">
{!strAmount} {!opportunity.CurrencyIsoCode}
</p>
</th>
</tr>
</tfoot>
</table>
</div>
<!-- TAX SECTION-->
<apex:outputPanel rendered="{!pdfShowTax}" layout="block">
<table>
<tbody>
<tr>
<td colspan="2" class="al-left">
<p class="bold small">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_Offer_Tax} {!opportunity.Tax__c}%" escape="false" />
</p>
</td>
<td colspan="2" class="al-right">
<p class="al-right bold small">
{!strAmountTax} {!opportunity.CurrencyIsoCode}
</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" class="al-left">
<p class="bold">
<apex:outputText value="{!$Label.PDF_ProposalOrderForm_Offer_TotalCostWithTax}" escape="false" />
</p>
</th>
<th colspan="2" class="al-right">
<p class="al-right bold">
{!strAmountWithTax} {!opportunity.CurrencyIsoCode}
</p>
</th>
</tr>
</tfoot>
</table>
</apex:outputPanel>
<!--*********************************************************************************************************-->
<!-- Terms and conditions -->
<!--*********************************************************************************************************-->
<div id="terms-and-conditions" class="content">
<h3><apex:outputText value="{!$Label.PDF_ProposalOrderForm_CommercialTC}" escape="false" /></h3>
<ul class="small al-left">
<apex:outputText value="{!strTermAndConditions}" escape="false"/>
<li>{!opportunity.Special_Term_in_Contract__c}</li>
</ul>
</div>
<!--*********************************************************************************************************-->
<!-- Billing Information -->
<!--*********************************************************************************************************-->
<apex:outputPanel id="billing-information" styleClass="content" layout="block" rendered="{!pdfShowBillingDetail}">
<h3><apex:outputText value="{!$Label.PDF_ProposalOrderForm_BillingInformation}" escape="false" /></h3>
<div class="spaced">
<div style="min-width: 460px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingEntity}</div>
<div class="field-content small-box">\BillingEntity1\</div>
</div>
<div style="min-width: 210px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingEntityVATNumber}</div>
<div class="field-content small-box">\BillingEntityVATNumber1\</div>
</div>
<div style="min-width: 680px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingStreet}</div>
<div class="field-content small-box">\BillingStreet1\</div>
</div>
<div style="min-width: 260px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingCity}</div>
<div class="field-content small-box">\BillingCity1\</div>
</div>
<div style="min-width: 160px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingZIPPostalCode}</div>
<div class="field-content small-box">\BillingZIPPostalCode1\</div>
</div>
<div style="min-width: 230px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingCountry}</div>
<div class="field-content small-box">\BillingCountry1\</div>
</div>
<div style="min-width: 350px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingContactFirstName}</div>
<div class="field-content small-box">\BillingFirstName1\</div>
</div>
<div style="min-width: 320px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingContactLastName}</div>
<div class="field-content small-box">\BillingLastName1\</div>
</div>
<div style="min-width: 190px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingContactTitle}</div>
<div class="field-content small-box">\BillingTitle1\</div>
</div>
<div style="min-width: 150px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingContactPhone}</div>
<div class="field-content small-box">\BillingPhone1\</div>
</div>
<div style="min-width: 320px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_BillingContactEmail}</div>
<div class="field-content small-box">\BillingEmail1\</div>
</div>
</div>
</apex:outputPanel>
<!--*********************************************************************************************************-->
<!-- Signature -->
<!--*********************************************************************************************************-->
<div id="signature" class="content">
<h3><apex:outputText value="{!$Label.PDF_ProposalOrderForm_Signature}" escape="false" /></h3>
<div class="spaced">
<div style="min-width: 150px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_Date}</div>
<div class="field-content large-box">\PartnerDate1\</div>
</div>
<div style="min-width: 290px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_Name}</div>
<div class="field-content large-box">\PartnerName1\</div>
</div>
<div style="min-width: 220px;" class="field-label">
<div class="small">{!$Label.PDF_ProposalOrderForm_SignatureStamp}</div>
<div class="field-content large-box">
<div style="position:absolute; margin-top:30px; margin-left:600px">\PartnerSignature1\</div>
</div>
</div>
<div style="min-width: 680px;" class="field-label al-center">
<div class="docusign checkbox" style="width: 70px;">
<span class="xx-small">PartnerAcceptTerms1</span>
</div>
<a class="small" href="{!pdfTermsAndConditionsURL}">{!$Label.PDF_ProposalOrderForm_TermsAndConditions}</a><br/>
<div class="docusign" style="margin-left: 35px;">{!pdfDocusignTCTag}</div>
</div>
</div>
</div>
</apex:form>
</apex:page>
Greetings to you!
You can use style="page-break-after:always;"
Please try this:
<div style="page-break-after:always;"> Put your content here </div>Or you can use it in outputPanel
f you put your Data content in Div and set a style of div as "page-break-after:always;" the contents will be automatically reflected on next page.
But if you want everything on the same page then you have to style @page in your CSS. You can give height and width of your page using size property.
For the first page:
@page:first { margin-top: 0.5cm; margin-bottom: 0.5cm; margin-left: 0.5cm; margin-right: 0.5cm; size: 220mm 300mm; /* page-break-after:always; */ /* page-break-after:auto; */ /*border :1px solid black;*/ /*border-bottom :1px solid black;*/ }For the second page:
@page{ margin-top: 0.5cm; margin-bottom: 0.5cm; margin-left: 0.5cm; margin-right:0.5cm; size: 220mm 300mm; /* border :1px solid black; */ }Please refer to below link:
http://www.antennahouse.com/CSSInfo/CSS-Page-Tutorial-en.pdf
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas