function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Making proper alignment in the pdf-- urgent

Hi Experts,

Im showing picklist values as checkboxes in the pdf page, but im not getting how to make alignment , could anyone help me please in this. Im providing the code where we are using to populate. 

I need in this format: values are big so in case its coming next line it has to be below of the value only.

User-added image
this is my vf code:
<td class="value" colspan="10">
<!-- CH01.Start -->
<apex:variable var="i" value="{!0}"/>
<apex:repeat value="{!P2}" var="P">
<apex:variable var="i" value="{!i+1}"/>
<apex:image value="{!If(P.check == true,$Resource.Checked,$Resource.UnChecked)}"/>
<apex:outputLabel value="{!P.val}"/>
<apex:outputLabel rendered="{!IF(i==3,(IF(MOD(i,3)=0,true,false)),false)}" ><br/>
</apex:outputLabel> <apex:outputLabel rendered="{!IF(i>4,(IF(MOD(i,2)=1,true,false)),false)}" ><br/>
<!-- CH01.END -->

controller :
    public List<picklist> P2 { get; set; }
 Schema.DescribeFieldResult fieldResult1 = Non_Compliance__c.Reason_for_Charge__c.getDescribe();
        list<schema.picklistentry> values1 = fieldResult1.getPickListValues();
        for (Schema.PicklistEntry PL2 : values1) 
                String s = PL2.getValue();
                if(NC.Reason_for_Charge__c != null && NC.Reason_for_Charge__c.ContainsIgnoreCase(s)){
                    P2.add(new picklist(s,true));
                    P2.add(new picklist(s,false));
Add a css class as follows
<style type="text/css">
.formatText   {
    width: 200px; // you can set the width accordingly
    text-align: left;
    margin: 0 0 10;

and add this css class to your component:
<apex:outputLabel styleClass="formatText" value="{!P.val}"/>
I think this will help you...