jQuery to modify SharePoint 2010 Column Width

Question

SharePoint 2010 - I have a Standard Task list in Gantt View that represents a list of projects (Sync from Project 2010). Since the column widths are not-persistent in SharePoint, I wrote a script to modify the width of the column (called "Title") but having very litle luck with it working. I am sure I have either a selector syntax, library, or CEWP issue (and obvious a knowlege gap). On the page I have placed a CEWP, and put the following logic in that part:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">  

$(function()  
{  
   $(document).ready(function() {
    //Get the th that has a title attribute and it contains the value Title 
    $('th[title="Title"]').css("width", "450px","important");  
    });
});

ExecuteOrDelayUntilScriptLoaded(function()
{
var oldGanttControl = SP.GanttControl;
SP.GanttControl = function()
{
oldGanttControl.call(this);
var oldInit = this.Init;
this.Init = function(jsGridControl, jsRawGridData, params)
{
oldInit.call(this, jsGridControl, jsRawGridData, params);
DoCustomizations(jsGridControl);
};
};
},"SPGantt.js");


function DoCustomizations(grid)
{
// Set the Splitter and Zoom Levels
grid.SetSplitterPosition(725);
grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+2);
} 
</script> 

The selector just will not get a hold on the Header. I have tried a number of variations to try and use the .css to modify...none successful

$("TH.ms-vh2-nograd:contains('Title')").css("width", "450px");  
$("TH.ms-vb:contains('Title')").css("width", "450px"); });  
$("tr.ms-viewheadertr th:contains('Title')").css("width", "450px");
$('th[title="Title"]').css("width", "450px","important");  
$('th[title="Title"]').css("width", "450px", "important"); 
$('th[title="Title"]').css('width', '450px', 'important'); 
$('th [title="Title"]').css("width", "450px", "important"); 
$("th [title='Title']").css("width", "450px", "important");

Any ideas on a way to change the Column width, maybe I am approaching this incorrectly? The generated HTML logic for this control is located in pastbin Line 102 is the target, width is the attribute.

Thanks in advance

Answer 1

can you refer to this as someone has kinds answered it for you! you just need to tweak the answer to suit your needs :) , the answer is by "Tanisha Rowe":

<script type="text/javascript"
src="ajax.googleapis.com/.../jquery.min.js"></script>
<script type="text/javascript">
$(function(){

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

});
</script>

its getting the table and getting the colum category and changing the css width to 300px so you need to change it slightly! Id recommend you go on the link and see her reply as its in more detail!

http://www.go4sharepoint.com/Forum/change-width-column-10948.aspx

hope this helps :)