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:
$(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>
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>
Comments
Post a Comment