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
AntonyasLenAntonyasLen 

Text alignement problem

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,

Hengky IlawanHengky Ilawan
<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-
AntonyasLenAntonyasLen

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

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

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-
AntonyasLenAntonyasLen

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?
Hengky IlawanHengky Ilawan

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-
AntonyasLenAntonyasLen

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
crop1645crop1645

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>