Monday 10 March 2014

Fix Header PageblockTable Salesforce with flickering issue fix in Mozila and IE

<apex:page standardController="Account" standardStylesheets="false">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="{!$Resource.jqueryfixheadertable}"></script>
   <apex:stylesheet value="{!$Resource.base}" />
   <apex:stylesheet value="{!$Resource.themefile}" />
  
 <apex:form id="theform"> 

    <script>
    $(document).ready(function() {
        $('.fixme').fixheadertable({
             caption : 'My header is fixed !',
             height  : 200
        });
    });
    </script> 
  
  
   <apex:pageBlock title="My Content"  >

        <apex:pageBlockTable value="{!account.Contacts}" var="item" styleclass="fixme">
             <apex:column headerValue="Col1"   value="{!item.name}"/>
              <apex:column headerValue="Col2"   value="{!item.name}"/>
                <apex:column headerValue="Col2"   value="{!item.name}"/>
                  <apex:column headerValue="Col2"   value="{!item.name}"/> 
      </apex:pageBlockTable>

    </apex:pageBlock> </apex:form>
</apex:page>
Link to CSS and Jquery Files
1  . base.css
Press Ctrl+s to Save after clicking  on above links and store all file in static resources .


6 comments:

  1. Hi Sheen,

    Awesome solution. I am trying to use this solution to fix the table header on my vf page, noticed, columns widths are fixed, how can I increase column width making horizontal scrolling enabled.

    ReplyDelete
  2. Oh there is colratio option, thanks :)

    ReplyDelete
  3. Thanks so much for this - this is great! I'm having trouble with column width though - is it possible to make it dynamic based on the size of the data cell in the row? Would I have to edit the colratio in some way?

    ReplyDelete
    Replies
    1. Iam also facing the issue in column resizing .Any body got the answer for this?

      Delete
    2. Hi Sheeen,
      I am also facing issue in column width. Is there any fix for this?

      Delete