SharePoint 2007: Moving the View Dropdown for Wide Lists

 

One of the annoying “features” of SharePoint 2007 is how the View dropdown gets pushed off of the page when working with list views with many columns.

 

Left part of the page:

One scroll to the right:

     

Two scrolls to the right and we can now find the view menu:

           

 

What would be nicer would be a View menu just to the right of the other toolbar buttons.

 

All we need to do is write a little JavaScript to find the toolbar TABLE and adjust the column widths.

Steps for a single view page:

1. Display the list’s view page
2. Click Site Actions, Edit Page
3. Add a Content Editor Web Part and move it to the bottom of the page (below the list’s web part)
4. Edit the Content Editor Web Part, click the Content Editor button and paste in the following JavaScript
5. Save everything and test!

Steps for all lists, pages and views:

1. Open SharePoint Designer and open your site
2. Open your master page (typically default.master)
3. Scroll to the bottom of the page and click just before the </body> tag
4. Paste the following JavaScript
5. Save everything and test!

 

<script>
// from TechTrainingNotes.blogspot.com

// find all tables
var x = document.getElementsByTagName("table");
for (var i=0;i<x.length;i++)
{
  // find the table with this class
  if (x[i].className=="ms-menutoolbar")
  {
    // change the widths of all of the cells to 0
    for (var j=0; j<x[i].rows[0].cells.length;j++)
    {
      x[i].rows[0].cells[j].style.width="0"
    }
    // change the width of the last column
    x[i].rows[0].cells[j-1].style.width="100%"
  }
}

</script>

I tried to solve this little problem by using CSS instead of JavaScript. I got close, but ended up with an empty cell at the end of the row. So, let me know if you find a CSS solution.

<style>

.ms-listheaderlabel
{
  width:100%
}
.ms-menutoolbar
{
  width:0;
}
</style>

 

.