Tuesday, April 3, 2012

Change Width of the Column SharePoint List using JQuery

Change a column width  using jQuery:

View Source to see the name of the table that contains your target column's
name. In this case my list  has a "Category" column. The table that holds the
column header that I want to alter looks like the following:

<table style="width: 100%;" sortable="" sortdisable="" filterdisable=""
filterable="" name="Category" ctxnum="1" displayname="Category"
fieldtype="Lookup" resulttype=""
9%2d9B31%2d9B5191754A80%7d" height="100%" cellspacing="1" cellpadding="0"
class="ms-unselectedtitle" onmouseover="OnMouseOverFilter(this)">

See the name property? It's "Category"

If I created a column  called "Category Column" instead of "Category" it would
show: name="Category _x0020_Column"

From whatever view you want to implement this on (e.g. AllItems.aspx) select
'Site Actions' --> Edit Page. Add a Content Editor Web Part (CEWP) and add the
following to the Source Editor:

<script type="text/javascript"
<script type="text/javascript">




<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js“></script>
< script>
$(“tr.ms-viewheadertr th:contains(‘Title’)”, “#MSO_ContentTable”).css(“width”, “50px”);
$(“tr.ms-viewheadertr th:contains(‘Assigned To’)”, “#MSO_ContentTable”).css(“width”, “300px”);
< /script>

No comments:

Post a Comment