7/15/2011

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:

image

One scroll to the right:

      image

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

            image

 

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

image

 

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>

 

.

7 comments:

Anonymous said...

Yay! what a fantastic post! I've seen several custom lists/library's in SharePoint that would benefit from this. :)

Amol Ghuge said...

Thank you very much for sharing this fabulous information..it's definately going t make a difference for the list's with more number of columns..Thanks again :-)

Phil D said...

Thanks, your solution works and the customer very much prefers the left-hand location of the View menu. Well done!

Anonymous said...

Great Solution! I could not get the default.master page solution to work but the content editor web parts did the trick.

Anonymous said...

This worked great, until I changed the view. Seems the dropdown only stays to the left in the default view. When I change to another view, the dropdown is back on the right.

Mike Smith said...

> This worked great, until I changed the view.
Did you add the code to the view page or the master page? You either need to add it to the master page, or to each view page. (Each view is a separate ASPX page.)

Anonymous said...

I tried adding the code to the master page first, but like the person said on March 28th, I could not get it to work. I then added it to several views and it works great. But would really like to get it working on the master page.

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.