List

Adjust Width of SharePoint Columns

SharePoint lists and libraries are great.  However, you may have noticed that sometimes, the column width on certain items just looks funky.  To remedy this, all you need to do is add a little javascript.

Go to the list or library that you want to resize and add a Content Editor Web Part.

From the script below, I am referencing jQuery from my internal site.

Copy and paste this code into the CEWP.

<script src=”/PublishingImages/javascript/jquery-1.3.2.min.js” type=”text/javascript”></script><script type=”text/javascript”>$(function(){$(“TH.ms-vh2-nograd:contains(‘Column 1’)”).css(“width”, “350px”);

$(“TH.ms-vh2-nograd:contains(‘Column 2’)”).css(“width”, “350px”);

});

</script>

Column 1” and “Column 2” will be the name or your columns that you want to resize.

Here is an example I used and only resized one column:

Before:

 

 

 

__________________________________________________

After:

 

2 thoughts on “Adjust Width of SharePoint Columns

  1. hmm. This did not work for me. however, if I change it background then i see the changes.

    $(“th.ms-vh2:contains(‘Name’)”).css(“background-color”, “green”);

    but the width never changes.

  2. Using the word “Name” will sometimes give you an issue. I have used that in the past and the actual name of the field ended up being “Title” or “Name1”. Not saying that this is your issue, just wanted to throw that one out.

    Are you referencing the javascript in your own site?

    Another way of trying to accomplish this is to replace “th.ms-vh2” wiith “th.ms-vb”

    I’ve had luck with both of these options.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.