function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lukasz PiziakLukasz Piziak 

VF PDF Page - Controlling Each Line Individually.

Hi,
I have requirement to create a simple VF page rendered as PDF with two text lines only. So far I was able to create VF page + controller + custom button. My question is how I can controll my text lines separeatelly in sense of text alligment, font size and font colour? I have produced a css style sheet which actually is controlling the whle page behaviour. Please see below my VF Page and CSS style sheet.

VF
<apex:page standardController="SCMC__Receipt_Line__c" extensions="ReceiptLineController" renderAs="PDF" showHeader="false" sidebar="false"> 
<apex:styleSheet value="{!URLFOR($Resource.Label)}" />  
    <apex:panelGrid columns="1">
        <apex:outputField value="{!receipt.SCMC__Item_Number__c}"/> 
        <apex:outputField value="{!receipt.SCMC__Item_Description__c}"/> 
    </apex:panelGrid> 
</apex:page>

CSS Style Sheets

@page {
    size: 3.93in 1.14in;
    margin:8px 8px 8px 8px;
}
body {
    font-family: sans-serif;
    font-size: 125%;
    text-align: left;
}

Thanks for any help.
I will appreciate any help with exact explannation as I'm very new to the VF.
Regards,
Lukasz
JeffreyStevensJeffreyStevens
When rendering as PDF - the CSS needs to be embedded in each line.  Also - there are certian VF tage that are not rendered in the PDF.  I usually try to build as much HTML as possible.  Also - There are only 5 font that can be rendered also.

Maybe code like this...
  
<apex:page standardController="SCMC__Receipt_Line__c" extensions="ReceiptLineController" renderAs="PDF" showHeader="false" sidebar="false"> 

<apex:outputField value="{!receipt.SCMC__Item_Number__c}" style="font-size:14pt;text-align:left;" />
<br/>
<apex:outputField value="{!receipt.SCMC__Item_Description__c}" style="font-size:14pt;text-align:left;" />


</apex:page>

If that doesn't work - wrap the outputFields in Div's
Lukasz PiziakLukasz Piziak
Hi Jeffrey,

Thanks for code, I have tried and nothing is cjanging on the preview. I have changed text-align to right and still text is on the left side,
Wold you please advise of how I can wrap this text in Div's? Thanks

<apex:page standardController="SCMC__Receipt_Line__c" extensions="ReceiptLineController" renderAs="PDF" showHeader="false" sidebar="false"> 

<apex:outputField value="{!receipt.SCMC__Item_Number__c}" style="font-size:14pt;text-align:right;" />
<br/>
<apex:outputField value="{!receipt.SCMC__Item_Description__c}" style="font-size:14pt;text-align:left;" />


</apex:page>
JeffreyStevensJeffreyStevens
<div>
<div style="width:150px;font-size:14pt;text-align:right;float:left;">
  <apex:outputField value="{!receipt.SCMC__Item_Number__c}" />
</div>
<div style="width:150px;font-size:14pt;text-align:left;float:left;">
  <apex:outputField value="{!receipt.SCMC__Item_Description__c}" />
</div>
</div>

Maybe something like that?