0

I want to freeze the header row of the list.

I found this link to do so and I put the code in the Content Editor Web Part of the same view page.

My problem is that I am getting the scroll bars withing the view but the headers are not freeze.

Snapshot -- Document view without headers

What should I do ?

Please help.

1

Here is the code that works with IE and Chrome browser. I hope it will work with all the browser also.

Thanks goes to http://salzerdesign.com/ for his post http://salzerdesign.com/test/fixedTable.html

List of things to do:
1. You need to reference jQuery file in you page
2. You need to define your own selector to select your table:

var $table = $("#onetidDoclibViewTbl0");

Here is the code that you can be included in content editor webpart to have fixed header:

<style type="text/css">
/*top most wrapper for fixed header solution*/
.fh-outerWrapper
{
    position:relative;
}

/* table wrapper*/
.fh-tableWrapper
{
    overflow:auto;
    height:300px;
}

/*the wrapper for 'th' content*/
.fh-thRow .fh-thContentWrapper{
    position:absolute;
    top:0;
}
.fh-bg
{
    position:absolute;
    top:0;
    height:30px;
    width:100%;
    background-color:#D5ECFF;

}
</style>

<script type="text/javascript">

$(function(){

// Get table reference
// TODO: apply your selector to select the table
var $table = $("#onetidDoclibViewTbl0");

// Get table's header row reference
var $hdr = $("tr.ms-viewheadertr:first", $table);

// Wrap table in div
$table.wrap("<div class='fh-tableWrapper' />");

// Wrap the table's wrapper in another div
// This is top most wrapper for fixed header table
$('.fh-tableWrapper').wrap("<div class='fh-outerWrapper' />");

// Now add another div within top most wrapper
// to acts as header background
$('.fh-outerWrapper').prepend("<div class='fh-bg' />");

// Put content of each table's header colmumn 'th'
// value/data in a div, so that it abosolute position is
// applied to it
$('th',$hdr).wrapInner("<div class='fh-thContentWrapper'/>");

// Add css class so that styling can be applied
$hdr.addClass("fh-thRow");
$table.addClass('fh-table');

});

</script>
  • The check un-check perfectly works in firefox but not properly working in IE.. – users1100 Aug 22 '13 at 12:26
  • 1
    I tested and found it works fine. Try to refresh the page and then check. Check this video for my test: screencast.com/t/YAxm9Gl9 – Amit Bhagat Aug 22 '13 at 16:29
  • Thank you sir, I saw the video and tested.. Works perfectly :-) – users1100 Aug 23 '13 at 3:51
  • It works perfectly in SP2010 but sir, when I pasted the content of the CEWP inside the SP2013 it reflects nothing. – users1100 Aug 23 '13 at 11:03
  • 1
    I have described that you need a selector to select the table, "var $table = $("#onetidDoclibViewTbl0");". If you show me the html code of you SharePoint page, I can help you. You can put your code pastebin.com and let me know the link. – Amit Bhagat Aug 26 '13 at 2:35
1

I checked the link and found it is referencing to this , and if you see that link you notice that it is for SharePoint 2007/WSS 3.0.
I check same thing for SharePoint 2010 and found that SharePoint 2010 is using iframe, so we cannot use it any more. If SharePoint would not use iframe it worked fine or by making some tweak it could be fixed.

  • Thank you for information sir, any way to solve this? @AmitKB – users1100 Aug 21 '13 at 4:07
  • Can you tell me how did you added the list to page? In my case I see the list in iframe and if your list is not in iframe then it can be done. – Amit Bhagat Aug 21 '13 at 7:44
  • OK.. I created one document library called docs then click on it to view its contents, now I am currently on Docs\Forms\AllItems.aspx page. Then clicked on Edit Page and added a new web part above the view of document library. Selected HTML Form Web Part and placed the code in it. – users1100 Aug 21 '13 at 7:58
  • Replaced the List Id and View Id also. – users1100 Aug 21 '13 at 7:58
  • Sir, one more help I need from you is that I found this another solution it works perfectly, but the problem is that when I edit the page in SharePoint Design and preview it in browser for 3-4 times the view disappears, i.e. the error arises displaying correlation ID Unable to display this web part. @AmitKB – users1100 Aug 21 '13 at 8:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.