Sharepoint Forum

 
Home » Forum » Sharepoint       Ask a questionRSS Feeds

Change Width of the Column

  Asked By: Tracie Bryan         Date: Jun 03, 2009      Category: Sharepoint      Views: 3146
 

How can I change width of the Column List?

Tagged:          

 

5 Answers Found

 
Answer #1       Answered By: Destiny Lewis          Answered On: Jun 03, 2009       

From what I know, it's something we have to live with.
Or maybe you can use JQuery to do some trick.

 
Answer #2       Answered By: Tanisha Rowe          Answered On: Jun 03, 2009       

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="ajax.googleapis.com/.../jquery.min.js"></script>
<script type="text/javascript">
$(function(){

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

});
</script>

Select Ok.

The columns width should now show 300px wide.

Remember that jQuery (indeed, all JavaScript) is case sensitive. I could not use
name=category or name=category _x0020_column. It will fail gracefully.

 
Answer #3       Answered By: Sierra Lewis          Answered On: Jun 03, 2009       

It didnt work, I don't know where I made mistake. Please can you help me?

I have a list  called "Systems List" (example), and some example columns. The
name of column  that I want change  width is "Columns1".

I opened the "Systems List", and I chose "Site Actions", and "Edit page". I
added "Content Editor Web Part" above "Systems List web part", and added the
code bellow inside code editor, and I had applyed, but it didnt work. Where did
I make mistake?

<script type="text/javascript"
src="ajax.googleapis.com/.../jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("table[name=Colunas2").css("width","300px");
});
</script>

 
Answer #4       Answered By: Dwight Becker          Answered On: Jun 03, 2009       

This is my line:
$("table[name= Category] ").css("width" ,"300px") ;

This is your line:
$("table[name=Colunas2").css("width","300px");

If your column  name is Columns1 then you should have:
$("table[name=Columns1").css("width","300px"); (Check your HTML source for the
correct column name...does your source show Colunas2 for Columns1?)

But you also need to make sure that you close your property selector correctly.
You missed a "]":
$("table[name=Columns1]").css("width","300px");

 
Answer #5       Answered By: Abhrajit Das          Answered On: Dec 29, 2010       

Unfortunately It did not work. Any pointers pleeeeeease....! I have WSS 3.0

This is what I have in my HTML source..


<TH nowrap scope="col" class="ms-vh2"><div style="width:100%;position:relative;left:0;top:0;"><TABLE style="width:100%;" Sortable="" SortDisable="" FilterDisable="" Filterable="" Name="Title" CtxNum="1" DisplayName="Title" FieldType="Text" ResultType=""

This is what i have in my CEWP source.

<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=Title]").css("width","50px");
});
</script>

 
Didn't find what you were looking for? Find more on Change Width of the Column Or get search suggestion and latest updates.


Your Answer
  • Answer should be atleast 30 Characters.
  • Please put code inside [Code] your code [/Code].