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
chris01010chris01010 

Left Align Headers of a Page Block Table

Does anyone know how to left align the column headers of an apex:pageBlockTable?

 

Currently the fields are left aligned but the headers are centre aligned.

 

apex:pageBlockSection id="section04child" showHeader="true" title="Account specifications example3" columns="1">                
                <apex:pageBlockTable var="newFormChild" value="{!newFormChilds}" columns="7">              
                     <apex:column style="width:25px;"><apex:outputText style="color:#ccc;" value="{!TEXT(newFormChild.TF_Position__c+1)}"/></apex:column>
                		<apex:column >
                			<apex:facet name="header">FundSettle<br/>Participant<br/>Account Number </apex:facet>                			
                			<apex:inputField style="width:50px;" value="{!newFormChild.Account_number__c}" styleclass="{!IF(newFormChild.TF_Position__c==0, 'required', '')}" />
                		</apex:column>
                		<apex:column >
                		    <apex:facet name="header">Full Legal Name of<br/>the Account </apex:facet>                			                
                			<apex:inputField style="width:100px;" value="{!newFormChild.Full_Legal_Name__c}" styleclass="{!IF(newFormChild.TF_Position__c==0, 'required', '')}" />
                		</apex:column>
                		<apex:column >
                			<apex:facet name="header">Account<br/>Designation </apex:facet>               			
                			<apex:inputField style="width:100px;" value="{!newFormChild.Account_Designation__c}" styleclass="{!IF(newFormChild.TF_Position__c==0, 'required', '')}" />
                		</apex:column>
                		<apex:column >
                		 	<apex:facet name="header">Legal Address </apex:facet>                			
                			<apex:inputField style="width:175px;" value="{!newFormChild.Legal_Address__c}" styleclass="{!IF(newFormChild.TF_Position__c==0, 'required', '')}" />
                		</apex:column>
                		<apex:column >
                			<apex:facet name="header">Dividend Policy </apex:facet>                			
                			<apex:inputField style="width:125px;" value="{!newFormChild.Dividend_Policy__c}" styleclass="{!IF(newFormChild.TF_Position__c==0, 'required', '')}" />
                		</apex:column>
                		<apex:column >
                			<apex:facet name="header">Participant<br/>Account<br/>Reference </apex:facet>                 			
                			<apex:inputField style="width:100px;" value="{!newFormChild.Participant_Account_Reference__c}" styleclass="{!IF(newFormChild.TF_Position__c==0, 'required', '')}" />
                		</apex:column>
                </apex:pageBlockTable>
                    <script type="text/javascript">
							j$(document).ready(function () {
								changeNoneValue();
								addRequireFieldMarker();
							});
					</script>			
                </apex:pageBlockSection>

 

Thanks

 

Chris

Navatar_DbSupNavatar_DbSup

Hi,

 

Try the below code snippet as reference:

<apex:page standardController="Account">
<style>
.headerRow .headerclass{text-align: left;}

</style>
<apex:pageBlock title="My Content" >

<apex:pageBlockTable value="{!account.Contacts}" var="item" headerClass="headerclass">
<apex:column value="{!item.name}" />
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 
chris01010chris01010

It seems to be ignored.

 

Does the <style> need to be added to the VF page itself or the controller?

 

Also, does not using the standard stylesheet cause it an issue?

 

Currently have:

 

 

<apex:page cache="true" expires="1" controller="eformController" showHeader="false" standardstylesheets="false">
    <apex:composition template="eformEditTemplate">     

<style>
.headerRow .headerclass{text-align: left;}
</style>
.........

 <apex:pageBlockSection id="section03child" showHeader="true" title="Account specifications" columns="1">                
                <apex:pageBlockTable var="newFormChild" value="{!newFormChilds}" columns="7" headerClass="headerclass">              
                     <apex:column style="width:25px;"><apex:outputText style="color:#ccc;" value="{!TEXT(newFormChild.TF_Position__c+1)}"/></apex:column>
                		<apex:column >
                			<apex:facet name="header">FundSettle<br/>Participant<br/>Account<br/>Number </apex:facet>                			
                			<apex:inputField style="width:125px;" value="{!newFormChild.Account_number__c}" styleclass="{!IF(newFormChild.TF_Position__c==0, 'required', '')}" />

.........

 
Mikhail UshakovMikhail Ushakov
Hi. I know it's been a while' but since there is no correct answer yet, then I'll post a correct one here.
The headerClass attribute should be not in pageBlockTable, but in column itself 
<apex:column headerClass="headerClass" />