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=""
sortfields="SortField=Category&SortDir=Asc&View=%7b864B3C2A%2dDF2B%2d4D2\
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"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

$("table[name=Category]").css("width","300px");

});
</script>

or

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js“></script>
< script>
$(function(){
$(“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