Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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

share|improve this question
    
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

1 Answer 1

up vote 0 down vote accepted

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 :)

share|improve this answer
    
Thanks...that did it. I appreciate it! –  Bryan Beck Aug 23 '12 at 15:45
    
no probs happy to help :) –  ali Sharepoint Aug 23 '12 at 15:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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