SharePoint 2013/2016: Change Width of List Column using Designer and jQuery

This SharePoint customization tutorial will discuss, how to change the width of the list view column in SharePoint 2013 using SharePoint designer 2013. We will also see, how to increase the SharePoint list title column width using jQuery.

Change Width of List Column using SharePoint Designer 2013

Recently in a business requirement, we got to increase the width of a SharePoint list view column.

Here I have a SharePoint list which has one column name as “CreatedByFirstName” and the width is a bit bigger and it looks like below:

change width of list column using sharepoint designer

Now Open your SharePoint site using the designer. Open the particular list and then in the list settings page, select the particular view, right-click and then edit the file in advanced mode.

Once it will open in advanced mode, From the ribbon select the Design tab in the LIST VIEW TOOLS section. And then click on Customize XSLT -> Customize Entire View as shown in the fig below. If you are not able to see the LIST VIEW TOOLS tab then, you can follow the List View Tools tab missing in the SharePoint designer 2013 article.

sharepoint 2013 change width of list column

Then in the whole file search for the below text.

<th nowrap="nowrap" scope="col"

Above to the line, you will see the below similar kind of line based on your column name.

<xsl:template name="FieldRef_header.CreatedByEmail" ddwrt:dvt_mode="header"

Here the column name is “CreatedByEmail”

Then we need to put the style attribute in the below <th line like below:

<th nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)" style="width:100px;">

I have set the header to be 100px for this column. Similarly, you can define other columns as well.

sharepoint change width of list column

Then save the page and refresh the view, your width should be displayed like below:

sharepoint change width of list column using designer

Increase SharePoint list title column width using jQuery

Now, we will see how to increase the SharePoint list title width using jQuery. The same jQuery code can be used to increase the list title column in SharePoint 2013/2016 or SharePoint Online.

By default if you will open a list view, the title column width looks like below:

Increase SharePoint 2013 list title column width using jQuery

Open the SharePoint 2013 list view page, here I want to changes in the AllItems.aspx page. Then Edit the page and then add a script editor web part. In the Script editor web part, put the below lines of code. Then Save the Page.

Below is the full code to increase the width of the SharePoint list title column using jQuery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("TH.ms-vh2:contains('Title')").css("width", "300px");
});
</script>

Now the List title column width will look like below:

Increase SharePoint list title column width using jQuery

You may like following SharePoint tutorials:

Here, we learned how to change the width of the list column using SharePoint designer 2013, also, we learned how to increase the width of the list Title column using jQuery in SharePoint 2013/2016 or SharePoint Online.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>