Align Views Drop down to the left in Sharepoint Document Libraries and Lists

Many times we have very long document libraries with lots of columns and the Views Drop down gets hidden to the extreme right of the page and people need to scroll to get to the the view.

Before:

align view

After:

align views

I have written the following JavaScript which aligns the view drop down to the left of the page and makes it always visible.

Follow the steps below to implement it on your SharePoint site

1. Edit AllItemsPage.aspx using Site Actions menu. which opens your page in Edit mode

2. Add a CEWP (Content Editor Web part to the page) using the add web part link

3. Add the following javascript to your CEWP and the view Toolbar will get aligned left

_spBodyOnLoadFunctionNames.push("ShiftViewToolBarLeft");

function ShiftViewToolBarLeft()
{

var pageTables = document.getElementsByTagName('table');
var cName = null;
var formTables = null;

for(var i=0; i < pageTables.length; i++)
{
cName = pageTables[i].className;
if (cName == "ms-menutoolbar"){
formTables = pageTables[i];
}
}

var cells = formTables.cells;
cells[cells.length-1].width = "99%";
cells[cells.length-3].style.display = "none";
cells[cells.length-4].style.display = "none";

}

However please note that since every view is an independent aspx page. If you want to have the same alignment on all the views then you will need to repeat the above steps on all the view pages.

1 thought on “Align Views Drop down to the left in Sharepoint Document Libraries and Lists”

Leave a Reply

Your email address will not be published. Required fields are marked *