I'm working with a piece of code that are supposed to "freeze" the header column so when user has to scroll down, the headers remain visible and the user know what he or she is looking at.
I have used the below code:
<style>
.ms-viewheadertr {
BACKGROUND-COLOR: white
}
</style><script>
/* wrap the table in a div, set its height, give it scrollbars, and move it down */
var myTable = document.querySelector(".ms-listviewtable");
var wrapperDiv = document.createElement('div');
wrapperDiv.setAttribute("ID","FreezePaneWrapper");
wrapperDiv.setAttribute("style","OVERFLOW: auto; HEIGHT: "+ (document.documentElement.clientHeight - document.getElementById("s4-bodyContainer").clientHeight - document.getElementById("s4-ribbonrow").scrollHeight - 50) +"px; padding-top:38px;");
wrapperDiv.appendChild(myTable.cloneNode(true));
myTable.parentNode.replaceChild(wrapperDiv,myTable);
/* Freeze the header row and move it up*/
var headerRow = document.querySelector(".ms-viewheadertr");
document.getElementById("FreezePaneWrapper").style.width = "" + headerRow.clientWidth + "px";
headerRow.style.width = "" + headerRow.clientWidth + "px";
headerRow.style.position = "absolute";
headerRow.style.top = ""+(headerRow.offsetTop-39)+"px";
/* Tell the header's columns to be the same width as the cells in the first "alternating" row */
var columns = document.querySelector("table.ms-listviewtable tr.ms-alternating").querySelectorAll("tr>td");
headers = document.querySelectorAll("tr.ms-viewheadertr th");
for(var i = 0; i < headers.length; i++){
if(columns[i].clientWidth > headers[i].clientWidth){
headers[i].style.width = ""+columns[i].clientWidth + "px";
}else{
columns[i].style.width = ""+headers[i].clientWidth + "px";
}
}
</script>
The problem is that when the list get's loaded, the column freeze work fine but the data in the column get shifted a little to the left which does not looks good.
Could someone please help me to fix this?