SharePoint jQuery: Setting View Column Width
A note from Mark Miller: Kjell-Sverre Jerijærvi at PuzzlePart has come up with a simple jQuery solution to the ubiquitous question of how to control column widths in lists and libraries. His next post will show how to free the column headers, too. Great stuff.
A very common request for changes to SharePoint list views is how to set the column width. This is not possible to do using the ootb “List Settings”, and the common suggested fix is to use SharePoint Designer (SPD) and convert the view into an “XSLT Data View”: How can I manage columns widths in list views? Most large companies do, however, prevent the use of SPD.
With jQuery there is no need to use SPD or to convert the view. In the following example jQuery will change the width of the two columns “Status description” and “Type of Work” by changing their CSS style attribute.
Start by looking up the HTML markup for the two table headers using View-Source. I’m using jQuery filters that look for the TH elements using a CSS class selector and a content filter. Then add a Content Editor web-part (CEWP) to your page and enter this script in the source editor:
Wow! I love this tip. It is exactly what I have been looking for and it executed on my page very easily. Thank you so much. I am looking forward to your next article on freezing the column headers!
You can write it so it doesn’t need a specific class:
$("tr.ms-viewheadertr th:contains('Status')", "#MSO_ContentTable");That will also run faster because of the context object “#MSO_ContentTable”.
Paul – Need some clarification on that one. Here’s the original line to control the width:
$(”TH.ms-vh2-nograd:contains(’Status description’)”).css(”width”, “150px”);
If I understand you, I should replace everything before .css with your code, minus the ending semicolon.
Is that correct?
Thanks AutoSponge. You can be even more specific and have different layouts for different views of the list, as the id of the inner table representing the view is the combination of the GUIDs for the list and the view. The jQuery context would then apply to a specific view. I would recommend using the SharePoint JavaScript ContextInfo object for the view to get the GUIDS using the ctx.listName and ctx.view properties.
@EndUserSharePoint,
It would look like this:
$("tr.ms-viewheadertr th:contains('Status')", "#MSO_ContentTable").css("width", "150px");@Kjell-Sverre Jerijærvi,
I like using the ctx object when it’s there (and there’s only one). That’s a good idea if you want each view have it’s own version of the script anyway (i.e., not using the linked file option).
In my upcoming “frozen header” post, I will use the “attribute starts with” filter in the selector like this to get at the view’s table based on the list’s GUID only:
$("TABLE[ID^='" + ctx.listName + "']")This way I can have a generic linked script file in a CEWP on each view’s page that will dynamically adapt to the list’s GUID.
Follow up posting on frozen headers: http://kjellsj.blogspot.com/2009/06/sharepoint-jquery-scrolling-view-with.html
I am trying to adjust the Sharepoint column widths on a view of a document imported from a spreadsheet. After importing the document shows up under lists and when viewed the columns become narrow. Is it possible to adjust the column properties in this case? I do not have a javascript source but I can view the source from the browser.
Hi Mark
Somehow it did not work on mine :-(
I have a column ‘Name’ that i wanted to shrink the width. This is what i did.
Added a CEWP on my view page. in the source editor used this code.
$(function(){
$(”tr.ms-viewheadertr th:contains(’Name’)”, “#MSO_ContentTable”).css(”width”, “10px”);
});
apply;ok;exit edit mode.
It did not change the width.
I think I am doing something wrong. But dont know what. Any sugession? It would be a great great help!
Thanks
AD
Why the heck Microsoft wouldn’t just IMPLEMENT AN EASY WAY TO DO THIS INCREDIBLY COMMON TASK?
Actually, I ask myself that question pretty much every 5 minutes when working with Microsoft products.