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
Rob Lilley 16Rob Lilley 16 

Right-aligning a field on a Visualforce page

Hello,
I wonder if anyone can help please? My knowledge of Apex is extremely limited. In our Salesforce we have a Visualforce page that places text at the top of the Opportunity page. In this order: Stage ¦ Grant Amount/Paid Amount ¦ Decision Date - it works fine except the text on the right hand side (Decision Date) sometimes is 'pushed down' to a new line on the left side of the page. Is there away of 'right aligning' this field so that it is always right-aligned on the same line as the other fields? The code is below.

Many thanks, Rob

<apex:page standardController="Opportunity"> <script> function reload(){ window.setTimeout('window.location.reload(true);',5); } </script> <div> <span style="color:#a52a2a;font-size:125%;font-weight:bold;padding-left:42px;"> <apex:outputField value=" {!opportunity.StageName}"/></span> <span style="color:#2a2aa5;text-align:center;font-size:125%;font-weight:bold;padding-left:30%;padding-right:30%;">Grant:&nbsp;<apex:outputField value=" {!opportunity.Grant_Amount__c}"/> / Paid &nbsp;<apex:outputField value=" {!opportunity.Total_Paid__c}"/></span> <span style="color:#259125;text-align:left;font-size:125%;font-weight:bold;padding-left:42px;"> <apex:outputField value="{!opportunity.Charity__c}"/></span> </div> <apex:detail subject="{!Opportunity.Id}" relatedList="true" title="true" inlineEdit="true" oncomplete="reload()"/> </apex:page>
 
logontokartiklogontokartik
You can try the below and see if it works for you 
<apex:page standardController="Opportunity">
   <script> function reload(){ window.setTimeout('window.location.reload(true);',5); } </script> 
   <div align="right">
      <table>
         <tbody>
            <tr>
               <td style="color:#a52a2a;font-size:125%;font-weight:bold;">
                  <apex:outputField value=" {!opportunity.StageName}"/>
               </td>
               <td nowrap="nowrap" style="width:color:#2a2aa5;text-align:center;font-size:125%;font-weight:bold;">
                  Grant:&nbsp;
                  <apex:outputField value=" {!opportunity.Grant_Amount__c}"/>
                  / Paid &nbsp;
                  <apex:outputField value=" {!opportunity.Total_Paid__c}"/>
               </td>
               <td style="color:#259125;font-size:125%;font-weight:bold;">
                  <apex:outputField value="{!opportunity.Charity__c}"/>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
   <apex:detail subject="{!Opportunity.Id}" relatedList="true" title="true" inlineEdit="true" oncomplete="reload()"/>
</apex:page>

 
Rob Lilley 16Rob Lilley 16
Hello Kartik, Many thanks for this but I do not think I was very clear. (Also you are correct I meant Charity, Not Decision Date Field).

I would like (all on the same line):
StageName (left aligned)                                            Grant Amount/Paid (centre aligned)                                                           Charity (right aligned)

I hope this is clearer, best wishes, Rob