Tag : view

SharePoint – Change Column Width

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:

301-1

<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

301-2

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)

301-3

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

301-4

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

301-5

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.

301-8

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

301-7

Save your changes by stopping the edit

Your columns now display in the correct width

301-9