Logo 
Search:

Sharepoint Forum

Ask Question   UnAnswered
Home » Forum » Sharepoint       RSS Feeds

Change Width of the Column

  Asked By: Tracie    Date: Jun 03    Category: Sharepoint    Views: 11730

How can I change width of the Column List?

Share: 

 

5 Answers Found

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

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

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

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

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

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.




Tagged: