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}"/>
<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>
</apex:pageBlock> </apex:form>
</apex:page>
Link to CSS and Jquery Files
1 . base.css
2 .themefile
Press Ctrl+s to Save after clicking on above links and store all file in static resources .
Hi Sheen,
ReplyDeleteAwesome 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.
Oh there is colratio option, thanks :)
ReplyDeleteThanks....
ReplyDeleteThanks 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?
ReplyDeleteIam also facing the issue in column resizing .Any body got the answer for this?
DeleteHi Sheeen,
DeleteI am also facing issue in column width. Is there any fix for this?