+ Start a Discussion
Alex Waddell 17Alex Waddell 17 

Need help spacing PageBlockSection to fit the width of the page

Hello,

I am trying to recreate the following header in Visual Force

User-added image

 I have the image, Case information and Form 2067 values all placed side by side but they are all floating left. How can i edit the code to push the Case information into the center and the Form 2067 all the way to the right?

User-added image
 
<apex:page standardController="Service_Plans__c" renderAs="pdf" >


   <apex:pageBlock >
           <apex:pageBlockSection columns="3">

           
           <apex:outputPanel >
 <apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>
           </apex:outputPanel>
           
           
           <apex:outputPanel >
              Case Information
           </apex:outputPanel>
           
           
            <apex:outputPanel >
               Form 2067
           </apex:outputPanel>

       </apex:pageBlockSection>
   </apex:pageBlock>
</apex:page>


 
Best Answer chosen by Alex Waddell 17
Raj VakatiRaj Vakati
Use this code
 
<apex:page standardController="Account" renderAs="pdf" >
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <style type="text/css">
                body {
                font-family: sans-serif;
                font-size:12px;
                }
                
                
            </style>
            
        </head>    
        <body> 
            
            
            
            
            <table cellpadding="6" width="100%">
                <tr>
                    <td>
                        <apex:outputPanel >
                            <apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Case Information
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Form 2067
                        </apex:outputPanel>
                    </td>
                    
                    
                </tr>
            </table>  
            
            
            
        </body>
    </html>
</apex:page>

 

All Answers

Raj VakatiRaj Vakati
Use this code
 
<apex:page standardController="Account" renderAs="pdf" >
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <style type="text/css">
                body {
                font-family: sans-serif;
                font-size:12px;
                }
                
                
            </style>
            
        </head>    
        <body> 
            
            
            
            
            <table cellpadding="6" width="100%">
                <tr>
                    <td>
                        <apex:outputPanel >
                            <apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Case Information
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Form 2067
                        </apex:outputPanel>
                    </td>
                    
                    
                </tr>
            </table>  
            
            
            
        </body>
    </html>
</apex:page>

 
This was selected as the best answer
Raj VakatiRaj Vakati
Avoid using pdf unsafe tags as well ..

Please refer this link 

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_component_behavior.htm
Alex Waddell 17Alex Waddell 17
Raj,

Thank you so much! I had created this form already using the SLDS styling and realized that it was not compatible with PDF....

I appreciate the link!