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
Rick SF AdminRick SF Admin 

How to align text and images in the header of visualforce pages

I want to created the exact image below for a visualforce page that'll render as a pdf. The border-line is needed also. 

User-added image

 MY CODE: 
<apex:page standardController="Newsletter__c" renderAs="pdf" extensions="MyPageController">   
 
<div class="header">
    Contact: First Last Name<br/>
    Demo, Inc. <br/>
    Phone: (301)222-2222
    <img src="{!$Resource.companylogo}" width="20%"/>
  </div>       
&nbsp;
&nbsp;        

 
Best Answer chosen by Rick SF Admin
Rohan Gupta 4Rohan Gupta 4
Hello Rick,
According to your needs.

User-added image 
<apex:page showHeader="false" renderAs="pdf"> 
    <apex:panelGrid columns="2" width="100%">
               <b> Contact: First Last Name</b><br/>
                Demo, Inc. <br/>
                Phone: (301)222-2222
                
                <apex:panelGrid columns="1" width="100%">
                    <img src="{!$Resource.companylogo}" width="80px" height="80px" align="right"/>
                </apex:panelGrid>           
    </apex:panelGrid> 
      <div class='container-fluid'> 
      <div style="width:700px; height:2px;background:black;"></div>
      </div>  
</apex:page>
I think your problem has solved.

Thank you
Rohan Gupta

All Answers

Rohan Gupta 4Rohan Gupta 4
I hope this helps you. 
<apex:page showHeader="false">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <apex:form >
     <div class='container-fluid'>      
        <div class="col-sm-5">
            Contact: First Last Name<br/>
            Demo, Inc. <br/>
            Phone: (301)222-2222
         </div>
         <div class='col-sm-7'>
        <img src="{!$Resource.companylogo}" width="80px" heifgt="80px"/>
       </div>
       
      </div> 
      <div class='container-fluid'> 
      <div style="width:670px; height:2px;background:black;"></div>
      </div>
     </apex:form>
</apex:page>

 
Rick SF AdminRick SF Admin
Thanks. But the company needs to be aligned to the right.
 
Shubham saini 14Shubham saini 14

Hi,

 

<apex:page standardController="Newsletter__c" renderAs="pdf" extensions="MyPageController">   
 
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size--1-of-2 slds-small-size--1-of-2 slds-medium-size--1-of-2">
<div class="header">
    Contact: First Last Name<br/>
    Demo, Inc. <br/>
    Phone: (301)222-2222
    </div>
</div>
<div class="slds-col slds-size--1-of-2 slds-small-size--1-of-2 slds-medium-size--1-of-2" style="float:right;">
<img src="{!$Resource.companylogo}" width="20%"/>    
</div>
</div>
</apex:page>

Thank You
Rohan Gupta 4Rohan Gupta 4
Hello Rick,
According to your needs.

User-added image 
<apex:page showHeader="false" renderAs="pdf"> 
    <apex:panelGrid columns="2" width="100%">
               <b> Contact: First Last Name</b><br/>
                Demo, Inc. <br/>
                Phone: (301)222-2222
                
                <apex:panelGrid columns="1" width="100%">
                    <img src="{!$Resource.companylogo}" width="80px" height="80px" align="right"/>
                </apex:panelGrid>           
    </apex:panelGrid> 
      <div class='container-fluid'> 
      <div style="width:700px; height:2px;background:black;"></div>
      </div>  
</apex:page>
I think your problem has solved.

Thank you
Rohan Gupta
This was selected as the best answer
Rick SF AdminRick SF Admin
Thank you Rohan.