SharePoint 2013 list column width

ANNOUNCEMENT: this Forums service is now discontinued. keep a  lookout, because we're  in the process of launching an exciting new community offering .... #365ers!

On occasion you may wish to change the column width within a SharePoint view. Many of the posts that I have seen recommend opening the view in SharePoint Designer and modifying the HTML script. To me this is cumbersome and the best solution I found that actually worked involved adding a webpart to the page where the view appears that changes the column sizes.

Here are the steps

Create a .txt file to define the column width

Create a .txt file(Say ChangeColumnWidth.txt) containing the code below:

<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(‘Description’)”).css(“width”, “300px”); // Add these lines for each column you wish to resize $(“TH.ms-vh2:contains(‘Title’)”).css(“width”, “200px”); // Add these lines for each column you wish to resize });

</script>

Upload the .txt file to a document library in SharePoint

Open the view who column widths you wish to change

I created a new view as shown below (Note the width of both the ‘Title’ and ‘Description’ fields)

Edit the page and add a Content Editor Web Part to the view

Edit the page and then add a content editor web part by following the steps 1,2 and 3 and then clicking on OK

Update the Web Part to refer to the file previously uploaded

Edit the web part by selecting the Edit Web Part option in the menu on the right hand side of the Content Editor Web Part.

Update the Content Link to reference the URL for the Text File that you previously uploaded (You can get this link by opening the file from the document library in SharePoint and copying the URL)

(https://contoso.sharepoint.com/sites/dev/Shared%20Documents/ChangeColumnWidth.txt)

Click on the ‘OK’ button when done

Stop editing the list

Save your changes by stopping the edit

Your columns now display in the correct width

Microsoft SharePoint is a Web-based collaboration tool used by many companies and organizations to store documents and other types of data. One of the primary functions of SharePoint is the creation and management of lists, which are sets of data organized into fields. If your small business is managing data in a SharePoint list, use the SharePoint Designer tool to adjust the width of field columns.

1. Launch SharePoint Designer 2010, open the View folder in the directory tree on the left side of the window, then double-click the file labeled "AllItems.aspx".

2. Go to the "Design" tab at the bottom of the window, click on the right edge of the column you want to adjust, then drag it to the left or right to resize it.

3. Switch to the "Code" tab at the bottom of the window.

4. Find the line that includes the following:

   <th scope="col"

   Remove this code from the line:

   Nowrap=’Nowrap’

   Replace it with the following code:

   style="width: ##px; overflow: auto; white-space: normal;"

   Substitute "##" with the number of pixels you want to use for the column width.

5. Scroll down to the line that includes "<td style" and add the following code:

   style="width: ##px; overflow: auto; white-space: normal;"

   Replace "##" with the number of pixels you want to use for the column width.

6. Click on the "Save" button in the top toolbar.

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:

Complete SharePoint Training Course Bundle for $199 (Just for Today)

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.

Then in the whole file search for the below text.

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

Here the column name is “CreatedByEmail”

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

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

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

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:

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.

Now the List title column width will look like below:

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.

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SPGuides.com