Monday, June 29, 2015

Change the column width of a SharePoint List View web part

If you're looking to adjust the width of specific columns for a list view (aka XsltListViewWebPart), you can do this easily by adding a Content Editor webpart to the page (e.g. /Lists/MyList/AllItems.aspx), link it to a CSS file:



Then add the following into a stylesheet, and you can target either the DisplayName or the Name fields:

<style type='text/css'>
.ms-vh-div[DisplayName='Trial Column']
{
  width:250px;
}
.ms-vh-div[name='Trial_x0020_Column']
{
  width:350px;
}
</style>

If you're not sure what to target take a look at the source of your web part and find the th column you want to target, which will look something like this:

<th nowrap scope="col" onmouseover="OnChildColumn(this)" class="ms-vh2"><div Sortable="FALSE" SortDisable="" FilterDisable="" Filterable="FALSE" FilterDisableMessage="" name="Trial_x0020_Column" CTXNum="3923" DisplayName="Trial Column" FieldType="Note" ResultType="" class="ms-vh-div">Trial Column</div></th>

No comments: