SharePoint – Use JQuery to set Column Width


Hello everyone. Today I was asked to alter the column width of some SharePoint Web Parts to improve the look and feel of a site. I altered the column width with a simple Javascript and JQuery.

Here is an example how the Web Parts of the site looked before I added my script:

sharepoint_before_column_width_script

Not pretty but luckily there is a simple way to change that.

Here is the script code:

<script src="/sites/test/Scripts/jquery.min.js"></script>
<script language="javascript">
$(function(){
$("TH.ms-vh2:contains('Name')").css("width", "300px");
});
</script>

With the above script you can alter the width of any column you want. You simply need to replace “Name” in the script with the Display Name of your Column.

To use the script you need to add a Content Editor Web Part to your site and embed your script in it.

sharepoint_add_column_width_script

After you have applied your script to the site your site will look like this:

sharepoint_after_column_width_script

Looks better than before, right? Well, that´s it. That´s all you need to do. I hope you liked my post. See you next time.

Sources:

http://social.technet.microsoft.com/Forums/sharepoint/en-US/eab8a3ca-1a91-45ca-b7d5-a5f78592083e/adjust-column-width-in-sharepoint-2013?forum=sharepointgeneral

http://www.emmielewis.com/changesplistcolumnwidth/

Advertisements
Tagged ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: