Apex Code Development You need to sign in to do that
Don't have an account?
ArmanM Visualforce PDF layout issue
Hi,
I am rendering a pdf with VF page, but I'm having a little trouble with alignment. Please see the below code and screenshot.
As you can see, the headings for Mobile, Web Spots and Subtotal & total is a little bit off. So basically I want the headings to be aligned to the left of the page, the dotted lines to be centered and currency code + amount to be aligned to the right of the page.
Here is that part of my code, please help out -
I am rendering a pdf with VF page, but I'm having a little trouble with alignment. Please see the below code and screenshot.
As you can see, the headings for Mobile, Web Spots and Subtotal & total is a little bit off. So basically I want the headings to be aligned to the left of the page, the dotted lines to be centered and currency code + amount to be aligned to the right of the page.
Here is that part of my code, please help out -
<style>
@page {
@top-center {
content: element(header);
}
}
@top-center {
content: element(header1);
}
@bottom-left {
content: element(footer);
}
}
div.header1 {
}
div.header {
border-bottom-style: solid;
border-bottom-width: thick;
border-bottom-color: #30b55a;
}
div.header h1 {
font-size: 12pt;
margin-bottom: 2px;
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
table, table tr, table tr td {
border: none;
border-collapse: collapse;
}
table tr td {
padding: 2px;
}
.desc1 {
color: #808080;
border-right-style: solid;
border-right-width: thin;
border-right-color: #30b55a;
padding-right: 28px;
}
.desc {
color: #808080;
border-right-style: solid;
border-right-width: thin;
border-right-color: #30b55a;
padding-right: 20px;
}
.desc2 {
color: #808080;
border-right-style: solid;
border-right-width: thin;
border-right-color: #30b55a;
padding-right: 10px;
}
.desc3 {
color: #808080;
border-right-style: solid;
border-right-width: thin;
border-right-color: #30b55a;
padding-right: 70px;
}
.value {
padding-left: 10px;
}
.value2 {
padding-left: 10px;
text-align: right;
}
</style>
.....
...
<apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(Opportunity.Mobile_Spots_B__c))}">
<div class="header" align="right">
<h1>Mobile Spots -
<apex:outputText style="font-size: 10pt" value="{0,number, }">
<apex:param value="{!Opportunity.Mobile_Spots_B__c}"/>
</apex:outputText>
<apex:outputText style="font-size: 10pt" value=" @ {!Opportunity.CurrencyIsoCode} {0,number, 0.00}">
<apex:param value="{!Opportunity.Mobile_Spot_Rate__c}"/>
</apex:outputText>
<apex:outputText style="font-size: 10pt" value=" ---------------------------------------------------------------------------------
{!Opportunity.CurrencyIsoCode} {0,number, }">
<apex:param value="{!Opportunity.Mobile_Revenue__c}"/>
</apex:outputText>
</h1>
</div>
<table>
<tr>
<td style="font-size: 10pt" class="desc">Audio Ads</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText style="font-size: 10pt" value="{0,number, }">
<apex:param value="{!Opportunity.Mobile_Spots_B__c}"/>
</apex:outputText>
</td>
</tr>
<tr>
<td style="font-size: 10pt" class="desc">Companion Banner</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText style="font-size: 10pt" value="{0,number, }">
<apex:param value="{!Opportunity.Mobile_Companion_Banner__c}"/>
</apex:outputText>
</td>
</tr>
<tr>
<td style="font-size: 10pt" class="desc">Display Impression</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText style="font-size: 10pt" value="{0,number, }">
<apex:param value="{!Opportunity.Mobile_Display_Impression__c}"/>
</apex:outputText>
</td>
</tr>
<tr>
<td style="font-size: 10pt" class="desc">Interstitial</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText style="font-size: 10pt" value="{0,number, }">
<apex:param value="{!Opportunity.Moblie_Interstitial__c}"/>
</apex:outputText>
</td>
</tr>
</table>
</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(Opportunity.Web_Spots_B__c))}">
<div class="header" align="right">
<h1>Web Spots -
<apex:outputText style="font-size: 10pt" value="{0,number, }">
<apex:param value="{!Opportunity.Web_Spots_B__c}"/>
</apex:outputText>
<apex:outputText style="font-size: 10pt" value=" @ {!Opportunity.CurrencyIsoCode} {0,number, 0.00}">
<apex:param value="{!Opportunity.Web_Spot_Rate__c}"/>
</apex:outputText>
<apex:outputText style="font-size: 10pt" value=" ------------------------------------------------------------------------------------------
{!Opportunity.CurrencyIsoCode} {0,number,}">
<apex:param value="{!Opportunity.Web_Revenue__c}"/>
</apex:outputText>
</h1></div>
<table>
<tr>
<td style="font-size: 10pt" class="desc">Audio Ads</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText value="{0,number, }">
<apex:param value="{!Opportunity.Web_Spots_B__c}"/>
</apex:outputText>
</td>
</tr>
<tr>
<td style="font-size: 10pt" class="desc">Companion Banner</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText value="{0,number, }">
<apex:param value="{!Opportunity.Web_Spots_B__c}"/>
</apex:outputText>
</td>
</tr>
<tr>
<td style="font-size: 10pt" class="desc">Display Impression</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText value="{0,number, }">
<apex:param value="{!Opportunity.Web_Display_Impression__c}"/>
</apex:outputText>
</td>
</tr>
<tr>
<td style="font-size: 10pt" class="desc">Interstitial</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText value="{0,number, }">
<apex:param value="{!Opportunity.Web_Interstitial__c}"/>
</apex:outputText>
</td>
</tr>
</table>
</apex:outputPanel>
<apex:outputPanel >
<div class="header" align="right">
<h1>Subtotal
<apex:outputText style="font-size: 10pt" value=" -------------------------------------------------------------------------------------------------------------------------
{!Opportunity.CurrencyIsoCode} {0,number,}">
<apex:param value="{!Opportunity.RO_Value__c}"/>
</apex:outputText>
</h1></div>
<table>
<tr>
<td style="font-size: 10pt" class="desc3">Discounts</td>
<td style="font-size: 10pt" class="value">
<apex:OutputText value="Marketing Campaign" > </apex:OutputText>
</td>
<td style="font-size: 10pt">
<apex:outputText value="- {0,number,}">
<apex:param value="{!Opportunity.RO_Value__c}"/>
</apex:outputText>
</td>
</tr>
</table>
</apex:outputPanel>
<br></br>
<apex:outputPanel >
<div class="header" align="right">
<h1>Total
<apex:outputText style="font-size: 10pt" value=" ---------------------------------------------------------------------------------------------------------------------------------
{!Opportunity.CurrencyIsoCode} 0.00">
</apex:outputText>
</h1></div>
<table>
<tr>
<td style="font-size: 10pt" class="desc2">Spots</td>
<td style="font-size: 10pt" class="value2">
<apex:outputText value="{0,number, }">
<apex:param value="{!Opportunity.Total_Spot_Booked__c}"/>
</apex:outputText>
</td>
</tr>
<tr>
<td style="font-size: 10pt" class="desc2">Approx. Impressions</td>
<td style="font-size: 10pt" class="value2">
<apex:OutputText style="font-size: 10pt" value="{0, number, }">
<apex:param value="{!Opportunity.Total_Impressions__c}"/>
</apex:OutputText>
</td>
</tr>
</table>
In your visual force inspect element or in CSS file change the width or padding in percentage instead of pixel.It will work.
Please refer to the below post for similar kind of issue.
https://developer.salesforce.com/forums/?id=906F000000098nuIAA
Hope this helps.
Best Regards,
Nagendra.P