Apex Code Development You need to sign in to do that
Don't have an account?
ArmanM Align text issue
Hi,
How can I align the following to the left of the page, its a pdf.
I want to shift all the text to the left with this formet, here is the section of code for this-
Please help out. Thank you !
How can I align the following to the left of the page, its a pdf.
I want to shift all the text to the left with this formet, here is the section of code for this-
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick;
border-bottom-color: #30b55a;">
Campaign Information </td>
</tr>
<tr>
<td style="color: #808080; border-right-style: solid; border-right-width: thin;
border-right-color: #30b55a;">
Campaign Name </td>
<td align="left">
{!Opportunity.Name} </td>
</tr>
<tr>
<td align="right" style="color: #808080; border-right-style: solid; border-right-width: thin;
border-right-color: #30b55a;">
Brand </td>
<td style="text-align:left">
{!Opportunity.Account.Name} </td>
</tr>
<tr>
<td align="right" style="color: #808080; border-right-style: solid; border-right-width: thin;
border-right-color: #30b55a;">
Start Date
</td>
<td style="font-weight: normal">
<apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
<apex:param value="{!Opportunity.Campaign_Start_Date__c}" />
</apex:outputText>
</td>
</tr>
<tr>
<td align="right" style="color: #808080; border-right-style: solid; border-right-width: thin;
border-right-color: #30b55a;">
End Date
</td>
<td style="font-weight: normal">
<apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
<apex:param value="{!Opportunity.Campaign_End_Date__c}" />
</apex:outputText>
</td>
</tr>
<tr>
<td align="right" style="color: #808080; border-right-style: solid; border-right-width: thin;
border-right-color: #30b55a;">
Duration
</td>
<td style="font-weight: normal">
<apex:outputText value="{0,number,0}">
<apex:param value="{!Opportunity.Campaign_Duration__c}"/>
</apex:outputText>
</td>
</tr>
Please help out. Thank you !
<apex:page standardController="Campaign" renderAs="pdf" applyBodyTag="false" applyHtmlTag="false" showHeader="false"> <html> <head> <style> .header { border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #30b55a; } .header h1 { font-size: 12pt; margin-bottom: 2px; } table, table tr, table tr td { border: none; border-collapse: collapse; } table tr td { padding: 2px; } .desc { color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a; padding-right: 10px; } .value { padding-left: 10px; } </style> </head> <body> <apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(Campaign.Name))}"> <div class="header"><h1>Campaign Information</h1></div> <table> <tr> <td class="desc">Campaign Name</td> <td class="value">{!Campaign.Name}</td> </tr> <tr> <td class="desc">Brand</td> <td class="value">{!Campaign.Owner.Name}</td> </tr> <tr> <td class="desc">Start Date</td> <td class="value"> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}"> <apex:param value="{!Campaign.StartDate}" /> </apex:outputText> </td> </tr> <tr> <td class="desc">End Date</td> <td class="value"> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}"> <apex:param value="{!Campaign.EndDate}" /> </apex:outputText> </td> </tr> </table> </apex:outputPanel> </body> </html> </apex:page>I would also recommend reviewing field sets [1] and they may help simplify your code.
[1] http://blog.deadlypenguin.com/blog/2016/04/25/field-sets-dynamic-visualforce/
All Answers
So switching it to align="left" works for me
<apex:page standardController="Campaign" renderAs="pdf"> <table> <tr> <td colspan="4"></td> </tr> <tr> <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #30b55a;">Campaign Information</td> </tr> <tr> <td style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;">Campaign Name</td> <td align="left">{!Campaign.Name}</td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;">Brand</td> <td style="text-align:left">{!Campaign.Owner.Name}</td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;">Start Date</td> <td style="font-weight: normal"> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}"> <apex:param value="{!Campaign.StartDate}" /> </apex:outputText> </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;">End Date</td> <td style="font-weight: normal"> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}"> <apex:param value="{!Campaign.EndDate}" /> </apex:outputText> </td> </tr> </table> </apex:page>There may be some other CSS that is affecting your tables. Can you provide the entire page? Personally I don't think it's anything but the align="left". If you look at your "Campaign Name" field, it's aligned to the left and it is missing the align attribute on your td. When the attribute is missing, it defaults to left.
<apex:page standardController="Opportunity" renderAs="pdf" applyBodyTag="false" > <html> <apex:form > <apex:pageBlock > <center> <table width="100%" style="font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;" cellpadding="5"> <head> <tr> <td colspan="4" > <img src="some img" ></img> </td> </tr> </head> <body> <tr> <td colspan="4" style="font-size: x-large; font-weight: bold"> {!Opportunity.Account.Name} </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr> <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #30b55a;"> Campaign Information </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Campaign Name </td> <td align="left" style="padding-left: 5px;"> {!Opportunity.Name} </td> </tr> <tr> <td align="left" style="color: #808080;border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Brand </td> <td align="left" style="padding-left: 5px;"> {!Opportunity.Account.Name} </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Start Date </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}"> <apex:param value="{!Opportunity.Campaign_Start_Date__c}" /> </apex:outputText> </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> End Date </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}"> <apex:param value="{!Opportunity.Campaign_End_Date__c}" /> </apex:outputText> </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Duration </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0,number, }"> <apex:param value="{!Opportunity.Campaign_Duration__c}"/> </apex:outputText> </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Geo </td> <td style="font-weight: normal; padding-left: 5px;"> {!Opportunity.Targeting_Country__c} </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr> <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #30b55a;"> Mobile Spots - <apex:outputText value="{0,number,000,000}"> <apex:param value="{!Opportunity.Mobile_Spots_B__c}"/> </apex:outputText> </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Audio Ads </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number, }"> <apex:param value="{!Opportunity.Mobile_Spots_B__c}"/> </apex:outputText> </td> </tr> <tr> <td width="160px" align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Companion Banner </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number, }"> <apex:param value="{!Opportunity.Mobile_Companion_Banner__c}"/> </apex:outputText> </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Display Impression </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number, }"> <apex:param value="{!Opportunity.Mobile_Display_Impression__c}"/> </apex:outputText> </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Interstitial </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number, }"> <apex:param value="{!Opportunity.Moblie_Interstitial__c}"/> </apex:outputText> </td> </tr> <tr> <td colspan = "4"> </td> </tr> <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}"> <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #30b55a;"> Web Spots - <apex:outputText value="{0, number,}"> <apex:param value="{!Opportunity.Web_Spots_B__c}"/> </apex:outputText> </td> </tr> <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}"> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Audio Ads </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number, }"> <apex:param value="{!Opportunity.Web_Spots_B__c}"/> </apex:outputText> </td> </tr> <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}"> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Companion Banner </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number, }"> <apex:param value="{!Opportunity.Web_Spots_B__c}"/> </apex:outputText> </td> </tr> <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}"> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Display Impression </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number,}"> <apex:param value="{!Opportunity.Web_Display_Impression__c}"/> </apex:outputText> </td> </tr> <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}"> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Interstitial </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number,}"> <apex:param value="{!Opportunity.Web_Interstitial__c}"/> </apex:outputText> </td> </tr> <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}"> <td colspan="4"> </td> </tr> <tr> <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #30b55a;"> Total </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Spots </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:outputText value="{0, number,}"> <apex:param value="{!Opportunity.Total_Spot_Booked__c}"/> </apex:outputText> </td> </tr> <tr> <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;"> Approx. Impressions </td> <td style="font-weight: normal; padding-left: 5px;"> <apex:OutputText value="{0, number, }"> <apex:param value="{!Opportunity.Total_Impressions__c}"/> </apex:OutputText> </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: normal"> Note: Spots will be spread out on the Mobile Playlist, Radio and ROS. </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: bold"> <font color ="blue"> Deliverables from {!Opportunity.Account.Name} </font> </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: normal"> <font color ="blue"> {!Opportunity.Campaign_Comments__c} </font> </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: bold"> Confidentiality: </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: normal"> <p> The parties involved acknowledge and agree that this term sheet, its material terms and conditions and any other information disclosed by one party to the other party in connection with this proposal or negotiation of the agreement is Confidential Information.</p> </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: bold"> Above terms agreed to by: </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: normal"> <br></br> Name: ____________________________________________________________________________________ <br></br> Designation: ____________________________________________________________________________________ <br></br> Company Name: ____________________________________________________________________________________ <br></br> Email Address: ____________________________________________________________________________________ <br></br> Mailing Address and Contact Details: ____________________________________________________________________________________ <br></br> Signature: ____________________________________________________________________________________ <br></br> Date </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: bold"> Above terms agreed to by (Name): </td> </tr> <tr> <td colspan="4" style="font-size: medium; font-weight: normal"> <br></br> Name: ____________________________________________________________________________________ <br></br> Designation: ____________________________________________________________________________________ <br></br> Signature: ____________________________________________________________________________________ <br></br> Date </td> </tr> </body> </table> </center> </apex:pageBlock> </apex:form> </html> </apex:page><apex:page standardController="Campaign" renderAs="pdf" applyBodyTag="false" applyHtmlTag="false" showHeader="false"> <html> <head> <style> .header { border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #30b55a; } .header h1 { font-size: 12pt; margin-bottom: 2px; } table, table tr, table tr td { border: none; border-collapse: collapse; } table tr td { padding: 2px; } .desc { color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a; padding-right: 10px; } .value { padding-left: 10px; } </style> </head> <body> <apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(Campaign.Name))}"> <div class="header"><h1>Campaign Information</h1></div> <table> <tr> <td class="desc">Campaign Name</td> <td class="value">{!Campaign.Name}</td> </tr> <tr> <td class="desc">Brand</td> <td class="value">{!Campaign.Owner.Name}</td> </tr> <tr> <td class="desc">Start Date</td> <td class="value"> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}"> <apex:param value="{!Campaign.StartDate}" /> </apex:outputText> </td> </tr> <tr> <td class="desc">End Date</td> <td class="value"> <apex:outputText value="{0,date,MM'/'dd'/'yyyy}"> <apex:param value="{!Campaign.EndDate}" /> </apex:outputText> </td> </tr> </table> </apex:outputPanel> </body> </html> </apex:page>I would also recommend reviewing field sets [1] and they may help simplify your code.
[1] http://blog.deadlypenguin.com/blog/2016/04/25/field-sets-dynamic-visualforce/