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">  

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

var oldGanttControl = SP.GanttControl;
SP.GanttControl = function()
var oldInit = this.Init;
this.Init = function(jsGridControl, jsRawGridData, params)
oldInit.call(this, jsGridControl, jsRawGridData, params);

function DoCustomizations(grid)
// Set the Splitter and Zoom Levels

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

  • Have you tried putting your selector line inside the "ExecuteOrDelayUntilScriptLoaded" block? Because your selector will fail to retrieve anything before its loaded... Or have you tried putting it inside the "DoCustomizations" method? Since it's there for a reason – Frederik P. Aug 23 '12 at 11:33

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"
<script type="text/javascript">



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!


hope this helps :)

| improve this answer | |
  • no probs happy to help :) – Ali Jafer Aug 23 '12 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.