SharePoint 2010 lists and libraries do not have scrollbars. The pages do, but when you scroll down a long list you will find that the column headings scroll off of the top of the page. The little project below is a quick and dirty little project to add scrollbars to a list and lock the column titles in place.
Before scrolling: (click the image for a larger version)
After scrolling (headings have scrolled off of the top):
After the fix below:
Bonus! Notice that not only are the column headings always displayed, but so is the "Add new item link" at the bottom!
Before you continue…
- This is a work in progress and presented as starting point for your own experiments!
- This has only been tested in SharePoint 2010
- It can be made to work with 2013, but there's a few extra steps that I'll need to document
- This works with View pages… it needs more work before being used with views displayed in web parts
- There's some excess white space at the top of the list.
- This does not work with the following view options (and probably a few more):
- Grouping
- The Content Editor Web Part as adding it breaks the default view selection behavior (You must use SharePoint Designer)
- There is a flaw with FireFox and possibly other browsers:
- The heading row may be listed twice
If you are OK with the above, then give it a try!
Steps:
- If you don't want to customize the default "All Items" (allitems.aspx) view then create a new Standard view
- You may want to customize your view and set the item limit to a number larger than the default of 30. Do not exceed 5000. (A SharePoint restriction)
- Open the site in SharePoint Designer
- Click Lists and Libraries and click your list
- Click the view you want to customize
- Click the Advanced Mode button in the Home tab of the ribbon
- In the Code pane scroll down and find "</WebPartPages:WebPartZone>" – you will add your code between that tag and the "</asp:Content>" tag
- Copy the code from below and paste between the two tags listed above
- Edit the following line and replace Bikes with the name of your list
var SummaryName = "Bikes "
Note: View your list page, use the browser's View Source feature and search for "summary=". Copy what follows including any spaces. If your list is named Bikes and has no description defined then you will find "Bikes ". (note the space at the end) If your list has a description then you may find something like "Bikes This is a list of bikes for sale." (note the exact use of spaces and the possible presence of a period or other punctuation)
Another example: The default Shared Documents library has this summary name: "Shared Documents Share a document with the team by adding it to this document library."
- In the <style> section adjust the height of the scrolling area of your list – you may need some trail and error here
#TTNlist
{
height:200px;
overflow-y:scroll !important;
overflow-x :auto
} - Save your changes and test your view
If it does not work:
Check your SummaryName! It has to be exactly what's found in the view page's HTML.
Try a delayed run of the script…
Comment out this line by adding two slashes at the beginning:
//or call the function immediately
TTNListScroll(); <—this line
And uncomment the spBodyOnLoadFunctionNames line:
// update the list after the page has loaded
//_spBodyOnLoadFunctionNames.push("TTNListScroll");
The code:
<script>function TTNListScroll(){// Scrolling list code from TechTrainingNotes.blogspot.com
// Edit the next line with your list's summary namevar SummaryName = "Bikes 2 ";
var TTNmyTable;
var TTNListDiv = document.createElement('div'); var TTNHeadingDiv = document.createElement('div'); var tables = document.getElementsByTagName("TABLE");for (var i=0;i<tables.length;i++)
{if ( tables[i].summary == SummaryName )
{TTNmyTable = tables[i];
break;
}
}
if(TTNmyTable == undefined)
{ //
// Table not found!
// you may want to comment out the next line after testing
alert("table '" + SummaryName + "' not found");//
return;
}
// make a copy of the table for the heading area
TTNHeadingDiv.appendChild(TTNmyTable.cloneNode(true));
TTNHeadingDiv.id="TTNheading";
TTNListDiv.appendChild(TTNmyTable.cloneNode(true));
TTNListDiv.id="TTNlist";
TTNListDiv.width="100%";
// udpate the page
var TTNnode = TTNmyTable.parentNode
TTNnode.replaceChild(TTNHeadingDiv, TTNmyTable);
TTNnode.appendChild(TTNListDiv);
// hide the heading row of the main list
TTNListDiv.childNodes[0].rows[0].style.visibility='hidden';
// make the DIV for the heading the same width as the main listTTNHeadingDiv.childNodes[0].style.width = TTNListDiv.childNodes[0].offsetWidth
}
// update the list after the page has loaded
//_spBodyOnLoadFunctionNames.push("TTNListScroll"); //or call the function immediatelyTTNListScroll();
</script><style type="text/css">#TTNheading{height:28px;
overflow:hidden;
}
#TTNlist{height:200px;
overflow-y:scroll !important;
overflow-x :auto
}
</style>
.
