function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Michael MMichael M 

Visualforce pdf page layout - need to spread out

Hello, I need to style my VF pdf so that it is more spread out. The lines scrunch together. I want the 1st column to end at the middle of the page, and the 2nd column to only start at the middle of the page, so that everything is spread out  nice. How can I style it that way? 

This is the current page:

<apex:page standardController="Lead"   renderAs="pdf">
    
    <div style = "font-size:14px;font-family:dialog;column-width: 50%;">

    <apex:pageBlock >
    <apex:pageblocksection title="System Information">
       <apex:repeat value="{!Lead}" var="ff">
            <apex:pageBlockSectionItem dataStyle="width:30%" labelStyle="width:20%">
                <apex:outputLabel value="Created By:" for="aa"/>
                <apex:outputField value="{!ff.CreatedById}" id="aa"/> 
            </apex:pageBlockSectionItem>
           
             <apex:pageBlockSectionItem dataStyle="width:30%" labelStyle="width:20%">
                <apex:outputLabel value="Referral Record Type:" for="aa"/>
                <apex:outputField value="{!ff.RecordTypeId}" id="aa"/> 
            </apex:pageBlockSectionItem>
           
            <apex:pageBlockSectionItem dataStyle="width:30%" labelStyle="width:20%">
                <apex:outputLabel value="Last Modified By:" for="aa"/>
                <apex:outputField value="{!ff.LastModifiedById}" id="aa"/> 
            </apex:pageBlockSectionItem>
       </apex:repeat>
    </apex:pageblocksection>
        
</apex:pageBlock>
    </div>
</apex:page>
Best Answer chosen by Michael M
VinayVinay (Salesforce Developers) 
Hi Michael,

You need to use CSS and align them based on your use case in VF.

Below are few working examples which has CSS implemented.  Kindly review and include them in your page.

https://blog.moothien.me/2018/02/visualforce-renderas-pdf-in-different.html
http://www.infallibletechie.com/2019/03/advanced-pdf-to-render-visualforce-page.html
http://blog.adityanaag.com/26/Styling+Visualforce+PDFs
http://www.interactiveties.com/blog/2015/render-visualforce-pdf.php

Hope above information was helpful.

Please mark as Best Answer so that it can help others in the future.

Thanks,
Vinay Kumar

All Answers

VinayVinay (Salesforce Developers) 
Hi Michael,

You need to use CSS and align them based on your use case in VF.

Below are few working examples which has CSS implemented.  Kindly review and include them in your page.

https://blog.moothien.me/2018/02/visualforce-renderas-pdf-in-different.html
http://www.infallibletechie.com/2019/03/advanced-pdf-to-render-visualforce-page.html
http://blog.adityanaag.com/26/Styling+Visualforce+PDFs
http://www.interactiveties.com/blog/2015/render-visualforce-pdf.php

Hope above information was helpful.

Please mark as Best Answer so that it can help others in the future.

Thanks,
Vinay Kumar
This was selected as the best answer
Sri Arumilli 3Sri Arumilli 3
Hi Michael,

It looks like our team of experts can help you resolve this ticket.
We have Salesforce global help-desk support and you can log a case and our Customer Success Agents will help you solve this issue. You can also speak to them on live chat. Click on the below link to contact our help-desk. Trust me it is a support service that we are offering for free!

https://jbshelpdesk.secure.force.com

Thanks,
Jarvis SFDC team
Michael MMichael M
Great, thank you