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
AttackAttack 

pageBlockTable .... apex:column .... headerClass .... font style

Hello folks,

I am facing a werid issue .. not sure if this is a limitation of Visualforce.

 

I wanted to change the font color of the header to my pageBlockTable. I used a CSS class and assigned it to the headerClass on the apex:column inside the pageBlockTable.

 

<style>
        .headerStyle{background-color:#638658;color:#FFFFFF}
</style>

 

<apex:pageBlockTable value="{!acc}">

  <apex:column headerValue="{!accTitle}" headerClass="headerStyle">

     <apex:outputLink value="/{!acc.account.Id}" target="_blank" styleClass="{!acc.style}">      

      {!acc.account.Name}

     </apex:outputLink>
  </apex:column>

</ apex:pageBlockTable>

 

 

The  background color of the header is getting applied but not the font color. But If I use a data table instead of a pageBlockTable,the font color gets applied. But I need to use pageBlockTable for business reasons.

 

Is this a limitation ? Any hints would be greatly appreciated !

 

 

 

 

Thanks.

Best Answer chosen by Admin (Salesforce Developers) 
Ron HessRon Hess

This is a trick of CSS, your specification must bind more tightly than the one you are looking to override

 

try this

 

 

<style>
   .headerRow .headerStyle{background-color:#638658;color:#FFFFFF}

</style>
 
 worked for me
 
there was a color specified by .list th {}, the above style overrides this default 
 
 


All Answers
Arun BalaArun Bala
Any hints folks ?


Ron HessRon Hess
This is a trick of CSS, your specification must bind more tightly than the one you are looking to override
 
try this
 
 
<style>
   .headerRow .headerStyle{background-color:#638658;color:#FFFFFF}

</style>
 
 worked for me
 
there was a color specified by .list th {}, the above style overrides this default 
 
 
This was selected as the best answer
Arun BalaArun Bala
Hi Ron,
Thanks a lot. This worked !!
 
 
Thanks again. 


B2000B2000
Ron, your solution worked great on a normal column header.  I am having a problem with the font color not being set when using a facet and command link.  The background color and text alignment get set, but not the font color.  Any ideas?
<style>
   .headerRow .selectedStyle{background-color: blue;color: #FFFFFF;text-align: center;}     
   .headerRow .nonSelectedStyle {background-color:green;color:white;text-align: center;}
</style>       


<apex:column width="17%" headerClass="{!IF(sortExpression=='Reply__c','selectedStyle','nonSelectedStyle')}" >
   <apex:facet name="header">
      <apex:commandLink action="{!ViewData}" value="Reply To{!IF(sortExpression=='Reply__c' ,IF(sortDirection='ASC','▼','▲'),'')}" >   
         <apex:param value="Reply__c" name="column" assignTo="{!sortExpression}" ></apex:param>           
      </apex:commandLink>         
   </apex:facet>         
   <apex:outputField value="{!m.Reply__c}" />                     
</apex:column>
 


B2000B2000
In addition, to use the footerClass, you bind to totalRow and not footerRow
.totalRow .yourStyle{background-color:#638658;color:#FFFFFF}

<apex:column footerClass="yourStyle" value="a.name"/> 
 


aperezSFDCaperezSFDC
I followed this trick and the CSS was being applied, but it was being overridden... So I changed my CSS to this:


 


.headerRow .TableTitle {
     color: #CC0000 !important; 
}


 


and it works great!


Michael DsozaMichael Dsoza
Hiiii I tried to use your css trick to change the color of apex:column header but it do not change the color of the header also it doesn't change the font-size tooo


cloud.brainscloud.brains
<tbody id="Level1SDCRecords"> <apex:repeat value="{!Level1SDCWrappers}" var="LevelOneProducts" id="L1SDCProducts"><tr class="dataRow" style="background-color:#D9D9D9;" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}" onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn){hiOn(this);} " > <td class="dataCell"><apex:outputText value="{!LevelOneProducts.productName}" id="selectLine1-1" style="width:180px" /></td><td class="dataCell"><apex:inputCheckBox value="{!LevelOneProducts.SDCCheckRecord.Listed__c}" id="selectLine1-2-1" rendered="{!LevelOneProducts.productVisible}"/></td><td class="dataCell"><apex:inputCheckBox value="{!LevelOneProducts.SDCCheckRecord.Out_of_Stock__c}" id="selectLine1-2-2" rendered="{!LevelOneProducts.productVisible}"/></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Volume__c}" id="selectLine1-2-3" style="width:35px" /></td><td class="dataCell"><apex:outputField value="{!LevelOneProducts.SDCCheckRecord.Volume_Measure__c}" id="selectLine1-2-4"/></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Stock__c}" id="selectLine1-2-5" style="width:35px" /></td><td class="dataCell"><apex:outputField value="{!LevelOneProducts.SDCCheckRecord.Stock_Measure__c}" id="selectLine1-2-6"/></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Status__c}" id="selectLine1-2-7" rendered="{!LevelOneProducts.productVisible}"/></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Facings__c}" id="selectLine1-2-8" style="width:35px" /></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Position__c}" id="selectLine1-2-9" rendered="{!LevelOneProducts.productVisible}"/></td></tr>
</apex:repeat>
</tbody>


Vlocity CME Admin 100Vlocity CME Admin 100

Hello, I need the label of each column to be fixed, I put the position fixed but I put the fields on top of it and it loses the position of the column. How can i fix this?User-added image


<apex:page showHeader="true" sidebar="true" controller="xOMReproPostImportReportController" tabStyle="XOMBatchLineJob__c">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="{!URLFOR($Resource.jquery_vfFloatingHeaders)}"></script>


    <apex:sectionHeader title="Repro Post Import Report" subtitle="Imported and processed repro lines" />
    <script>
        $(document).ready(function() {
            $('.floatingHeaderTable').vfFloatingHeaders();
             
        });
    </script>
    <style>
        
        .tableContainer
        {   
           
            height:290px; 
            width: 100%;
            overflow:auto;
            
            
        }  

        .tableContainer2
        {
           
            height:190px; 
            width: 100%;
            overflow: auto;
        }      
        .floatingStyle 
        { 
            position:fixed;
        }

        .apexp .detailList .list .headerRow th {
        white-space: normal;
         
        } 

        tr:nth-child(even) {background-color: #f2f2f2;}
        
     
        
      .headerRow .TableTitle {
            
           position:fixed;
            width: auto width;
            height: Auto Height;
           color: #CC0000 !important; 
            top: auto;            
            left: auto;
            
    
        }
       
         
        
        
        
    </style>

    <apex:form >
        <apex:pageBlock id="thePageBlock" title="Repro lines">
            <apex:pageBlockButtons location="top">               
            </apex:pageBlockButtons>
            <apex:pageBlockSection id="resumenSection" title="Resumen" columns="1"  > 
                <apex:outputPanel styleClass="tableContainer" layout="block"   >    
                    <apex:pageBlockTable value="{!reproLines}" var="reproLine"  columns="17" styleClass="floatingHeaderTable !important" >
                        <apex:column headerValue="Lote Id" headerClass="TableTitle" value="{!reproLine.loteId}"/> 
                        <apex:column headerValue="Wholesale Account" headerClass="TableTitle"   > 
                            <apex:outputLink value="/{!reproLine.wholesaleAccount}" target="_blank">{!reproLine.wholesaleAccount}</apex:outputLink>
                        </apex:column>
                        <apex:column headerValue="# Total Lineas"  value="{!reproLine.totalLineas}"/>
                        <apex:column headerValue="# Ordenes Creadas"  breakBefore="" value="{!reproLine.ordenesCreadas}"/>
                        <apex:column headerValue="Fecha de inicio de Lote" value="{!reproLine.initTimestamp}"/>
                        <apex:column headerValue="# Ordenes c/Productos"   value="{!reproLine.ordenesConProductos}"/>
                        <apex:column headerValue="# Ordenes Descompuestas"  value="{!reproLine.ordenesDescompuestas}"/>
                        <apex:column headerValue="# Ordenes Activadas"  value="{!reproLine.ordenesActivadas}"/>
                        <apex:column headerValue="# Ordenes Fallidas"  value="{!reproLine.ordenesFallidas}"/>
                        <apex:column headerValue="% Ordenes Creadas"  value="{!FLOOR(reproLine.ordenesCreadas / reproLine.totalLineas * 100)}%"/>
                        <apex:column headerValue="% Ordenes c/Productos"  value="{!FLOOR(reproLine.ordenesConProductos / reproLine.totalLineas * 100)}%"/>
                        <apex:column headerValue="% Ordenes Descompuestas" value="{!FLOOR(reproLine.ordenesDescompuestas / reproLine.totalLineas * 100)}%"/>
                        <apex:column headerValue="% Ordenes Activadas"  value="{!FLOOR(reproLine.ordenesActivadas / reproLine.totalLineas * 100)}%"/>
                        <apex:column headerValue="% Ordenes Fallidas"  value="{!FLOOR(reproLine.ordenesFallidas / reproLine.totalLineas * 100)}%"/>
                        <apex:column headerValue="Fecha de fin de Lote"  value="{!reproLine.endTimestamp}"/>
                        <apex:column headerValue="Acción" >
                            <apex:commandButton value="Ver Detalle" action="{!getLoteDetail}" reRender="thePageBlock">
                                <apex:param assignTo="{!selectedLoteId}" name="selectedLoteId" value="{!reproLine.loteId}"/>
                            </apex:commandButton>
                        </apex:column>
                    </apex:pageBlockTable>
                </apex:outputPanel>
                
            </apex:pageBlockSection>
            <apex:pageBlockSection id="loteDetailSection" title="Detalle de Lote:  {!selectedLoteId}" rendered="{!selectedLoteId!=NULL}" columns="1">
                <apex:outputPanel styleClass="tableContainer2" layout="block">
                <apex:pageBlockTable value="{!reproLinesLoteDetail.listOfLines}"  var="loteLineDetail" width="100%">
                    <apex:column headerValue="Orchetration Plan">
                        <apex:outputLink value="/apex/vlocity_cmt__OrchestrationPlanViewCommon?id={!loteLineDetail.orchPlanId}" target="_blank">{!loteLineDetail.orchPlanId}</apex:outputLink>
                    </apex:column>
                    <apex:column headerValue="registro" value="{!loteLineDetail.registro}"/>
                    <apex:column headerValue="Status Orden" value="{!loteLineDetail.statusOrden}"/>
                    <apex:column headerValue="Orden Creada" value="{!loteLineDetail.ordenCreada}"/>
                    <apex:column headerValue="Productos Añadidos" value="{!loteLineDetail.productosAdded}"/>
                    <apex:column headerValue="Orden Descompuesta" value="{!loteLineDetail.ordenDescompuesta}"/>
                    <apex:column headerValue="Orden Activada" value="{!loteLineDetail.ordenActivada}"/>
                    <apex:column headerValue="Orden Fallida" value="{!loteLineDetail.ordenFallida}"/>
                    <apex:column headerValue="Mensaje" value="{!loteLineDetail.mensaje}"/>
                </apex:pageBlockTable>
            </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>



</apex:page>