Text alignement problem

[AntonyasLen]

Hi,

I created a visual page rend as pdf to generate invoices (so far it's working pretty well).

I just got a problem with my text alignment, it's looks like the right alignment doesn't work.

I can't manage quote-invoices-everthing but i can't aligne my data (newbie sorry)

Here the extract from my code:

  <table style="text-align:right;">

	    <tr>

	    <td Style="width:38%;">
	
	    </td>
	    <td Style="color:#6e7277; face:Arial, Helvetica, sans-serif; font-size:12px; width:20%;">
		    	<apex:panelGrid columns="1" >
		                    <apex:outputText value=" Total Articles HT : " />
		        </apex:panelGrid>
		        
		        <apex:panelGrid columns="1" >
		                    <apex:outputText value=" Remise Exceptionnelle :     " />
		        </apex:panelGrid>
		        
		        <apex:panelGrid columns="1" >
		                    <apex:outputText value=" Frais de port HT : " />
		        </apex:panelGrid>
		        
		        <apex:panelGrid columns="1" >
		                    <apex:outputText value=" Total HT : " />
		        </apex:panelGrid>
		        
		        <apex:panelGrid columns="1" >
		                    <apex:outputText value=" TVA : " />
		        </apex:panelGrid>
		        
		        <apex:panelGrid columns="1" >
		                    <apex:outputText value=" Total TTC : " />
		        </apex:panelGrid>    
		         
		        <br/>
		        
		         <apex:panelGrid columns="1" >
		                    <apex:outputText value=" Acompte perçu réf: : " />
		        </apex:panelGrid>
		        
		        <apex:panelGrid columns="1" >
		                    <apex:outputText value=" Net à Payer : " />
		        </apex:panelGrid>  
		    </td>
	   
	    	<td Style="color:#6e7277; face:Arial, Helvetica, sans-serif; font-size:12px;width:27%;">
		   			<apex:panelGrid columns="1"  Style="color:#fffffa;">
		   						<apex:outputText value="blank"/> 
		            </apex:panelGrid>
		            
		            <apex:panelGrid columns="1" >
		            			<apex:outputText value="{!ROUND(Invoice__c.Global_Discount__c,0)}% "/>              
		            </apex:panelGrid>
		    
		           <apex:panelGrid columns="1"  Style="color:#fffffa;">
		   						<apex:outputText value="blank"/> 
		            </apex:panelGrid>
		            
		            
		            <apex:panelGrid columns="1"  Style="color:#fffffa;">
		   						<apex:outputText value="blank"/> 
		            </apex:panelGrid>
		            
		            <apex:panelGrid columns="1" >
		                        <apex:outputText value="{!Invoice__c.VTA_Perct__c}"/>               
		            </apex:panelGrid>
		
		           <apex:panelGrid columns="1"  Style="color:#fffffa;">
		   						<apex:outputText value="blank"/> 
		            </apex:panelGrid>
		            
		             <br/>
		    	 	 <apex:panelGrid columns="1">
		                  <apex:outputText value="{!Invoice__c.Reference_Name__c}"/>
		            </apex:panelGrid>
		
		          <apex:panelGrid columns="1"  Style="color:#fffffa;">
		   						<apex:outputText value="blank"/> 
		            </apex:panelGrid>
		       
		        </td>
	    <td Style="color:#6e7277; face:Arial, Helvetica, sans-serif; font-size:12px;width:15%;align:right;">
	   			<apex:panelGrid columns="1"  >
	                        <apex:outputText value="{!ROUND(Invoice__c.Invoice_Total_HT__c,2)}"/>
	            </apex:panelGrid>
	            
	            <apex:panelGrid columns="1" >
	            			
	                        <apex:outputText value="{!ROUND(Invoice__c.Global_Discount_value__c,2)}"/>
	            </apex:panelGrid>
	    
	            <apex:panelGrid columns="1" >
	                        <apex:outputText value="{!ROUND(Invoice__c.Delivery_Cost__c,2)}"/>
	            </apex:panelGrid>
	            
	            
	            <apex:panelGrid columns="1" >
	                    <apex:outputText value="{!ROUND(Invoice__c.Grand_Total_HT__c,2)}" />
	            </apex:panelGrid>
	            
	            <apex:panelGrid columns="1" >
	          				
	                        <apex:outputText value="{!ROUND(Invoice__c.VTA_Value__c,2)}"/>
	            </apex:panelGrid>
	
	            <apex:panelGrid columns="1" >
	                        <apex:outputText value="{!ROUND(Invoice__c.Total_TTC__c,2)}" />
	            </apex:panelGrid>
	            
	            <br/>
	    	  	<apex:panelGrid columns="1" >
	                        <apex:outputText value="{!ROUND(Invoice__c.Balance_in_favour__c,2)}"/>
	            </apex:panelGrid>
	
	            <apex:panelGrid columns="1"  >
	                        <apex:outputText value="{!ROUND(Invoice__c.Net_Amount_due__c,2)}" />
	            </apex:panelGrid>
	       
	        </td>
	    </tr>
    
    </table>

 Here the result:

Dear community please help me,

[Khaiwong]

<td Style="color:#6e7277; face:Arial, Helvetica, sans-serif; font-size:12px;width:15%;align:right;">

I think the highlighted above should be text-align:right.

-Hengky-

[AntonyasLen]

i tried with both  but it looks like doesn't work

[AntonyasLen]

I changed by text-align:right but nothing changed ...=( anyone can't help me ?

[Khaiwong]

Hi Antony,

Try to use inline style at the <apex:outputText>

By the way, I am not sure why you are using <apex:panelGrid> with single column, you can write it like this actually:

<apex:panelGrid columns="3">
    <!-- Row #1 -->
    <apex:outputText value=" Total Articles HT : " />
    <apex:outputText value="" />
    <apex:outputText value="{!ROUND(Invoice__c.Invoice_Total_HT__c,2)}" style="text-align:right"/>

    <!-- Row #2 -->
    <apex:outputText value=" Remise Exceptionnelle :     " />
    <apex:outputText value="{!ROUND(Invoice__c.Global_Discount__c,0)}% " />
    <apex:outputText value="{!ROUND(Invoice__c.Global_Discount_value__c,2)}" style="text-align:right"/>

    ...
</apex:panelGrid>

 -Hengky-

[AntonyasLen]

i don't really know it's my first page in visual force....

I will try your way but i still have a question ...

Should i put this apex:PanelGrid inside a table?

[Khaiwong]

It depends. But in your case, I don't think you need to.

PanelGrid itself will be generated as table.

Please refer to the apex:panelGrid doc for more detail infor.

-Hengky-

[AntonyasLen]

ok i'll give a look to this doc.

It's kind a mess in  my head sometimes...because we can use HTML but also visual froce attribute it's not really clear

[crop1645]

Just ran into this issue, the solution is to use columnClasses on the panelGrid as follows

(for a two column panelGrid where column one should be right aligned and column 2 should be left aligned)

<style type="text/css">
		.hdrCaption {
			text-align:right;
		}
		.hdrCaptionValue {
			text-align:left;
		}
</style>



<apex:panelGrid columns="2" columnClasses="hdrCaption,hdrCaptionValue">
			<apex:outputText value="Pricing Proposal for:" />
			<apex:outputText value="{!accountName}"/>
			<apex:outputText value="Prepared:"/>
			<apex:outputText value="{!qPrepareDate}"/>
</apex:panelGrid>