locked
Sharepoint Column Width

    Question

  • How do I change the column width in sharepoint so the data displays properly in standard view?
    Wednesday, September 17, 2008 9:18 PM

Answers

  • Hi,

     

    I think you can modify the width of the column using Microsoft SharePoint Designer 2007.

    The steps below:

    1.    Open the view in Microsoft SharePoint Designer 2007.

    2.    In the "Design" window, right click anywhere on the body of the view.

    3.    Select "Convert to XSLT Data View".

    4.    Click once on the column title you wish to adjust.

    5.    You should now be able to drag the column to the desired width.

     

    You can also edit web part's css class style:".ms-vb", but the style is used in multiple places and its properties are grouped with other styles. So we should change the style carefully (obviously I saved a backup first in case it all went very badly).

    This article about Css Reference Chart for SharePoint 2007 might help you :
    http://www.heathersolomon.com/content/sp07cssreference.htm#WebParts

     


    Xue-Mei Chang
    Friday, September 19, 2008 7:44 AM

All replies

  • Hi,

     

    I think you can modify the width of the column using Microsoft SharePoint Designer 2007.

    The steps below:

    1.    Open the view in Microsoft SharePoint Designer 2007.

    2.    In the "Design" window, right click anywhere on the body of the view.

    3.    Select "Convert to XSLT Data View".

    4.    Click once on the column title you wish to adjust.

    5.    You should now be able to drag the column to the desired width.

     

    You can also edit web part's css class style:".ms-vb", but the style is used in multiple places and its properties are grouped with other styles. So we should change the style carefully (obviously I saved a backup first in case it all went very badly).

    This article about Css Reference Chart for SharePoint 2007 might help you :
    http://www.heathersolomon.com/content/sp07cssreference.htm#WebParts

     


    Xue-Mei Chang
    Friday, September 19, 2008 7:44 AM
  • Hi,
       But after converting a list in XSLT view sometimes some columns such as "Person & Group" "created by" etc. don't show the proper value in the column...


    Thanks & Regards
    Vishwa
    Friday, September 19, 2008 8:40 AM
  • Hi

    What if you don't have MS SharePooint Designer?
    Does this mean you are stuck?


    Thanks,

    George
    Thursday, April 02, 2009 3:24 PM
  • Sharepoint Designer is now free .

    Serge Luca
    Serge Luca; blog: www.redwood.be
    Thursday, April 02, 2009 7:07 PM
  • Step 3 doesn't work for me, right click.  I am in designer 2007, and see the folder list, and choose the view, but in the middle window, it only shows me "content place holders".  How do I get it to look like the page, so I can right click and find the "convert to xslt" choice?
    Wednesday, July 22, 2009 8:14 PM
  • I was looking for a simple way to do this and after reading 10 pages of theory I accidently right clicked on the column and saw the column width option and adjusted there as needed. I know this probably isnt the answer for most people here but I post it anyway in case someone else is out there and just overlooked the obvious answer- I hope this helps someone.
    Thursday, July 30, 2009 5:03 PM
  • when I right click the column header I do not have a "column width" option.  Can you explain further?
    Friday, August 07, 2009 11:10 PM
  • Just because it is free does not mean my company will load it on the network.  Do you have a solution that does not require SPD?  Perhaps some CSS modification installed in a CEWP?
      Thank you
    Tuesday, October 06, 2009 7:14 PM
  • I don't think this works when you switch back to standard view for those of us stuck in Sharpoint 2003 world
    Thursday, January 07, 2010 9:24 PM
  • This approach worked and was persistent. 

    But after making this change I could no longer "Edit in Datsheet" (from the "Actions" drop-down.  I could select "Export to Spreadsheet" but no data is exported, just two columns called "Item Type" with a constant value of "Item" and "Path" (also with a constant).

    It would be perfect without these limitations, but with them it is reallly not viable for me.

    Am I overlooking something?

    thx, MF 
    Tuesday, February 09, 2010 12:53 PM
  • You can create a new webpart in the sharepoint page, Navigate to your page and select Site Actions è Edit Page, Click on "Add a Web Part", In the Change List Columns Width web part, select edit è Modify Shared Web Part, In the Content Editor tool pane, select "Source Editor", 
    An editor opens, 

    add following javascript : 

    <script type="text/javascript">

    _spBodyOnLoadFunctionNames.push("changeColumnLengths");

    function changeColumnLengths() {

    var tableNodes = getElementsByClass(document,'ms-listviewtable','table');
    //update the 0 in tableNodes[0] to point to the list you want to modify. Put 0 for the first list, 1 for the second list, 2 for the third list, etc...
    var tableNode = tableNodes[0];
    if ( tableNode == null )
    alert('table is null');

    //update the columnClassName value below to match the class of the column you want to adjust. You might want to use the IE developer toolbar (http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en) or press F12 with IE8 to easily find the class of your column or look at the HTML source of your page
    var columnClassName = 'ms-vh2';

    var els = getElementsByClass(tableNode,columnClassName,'TH');

    //update the 0 in els[0] to reference the column you want to modify. Put els[0] if you want to modify the first column that has the class name specified in columnClassName, els[1] if you want to modify the second column  etc... Update also the width value to match your needs.
    els[0].width = "5%";
    //els[1].width = "5%";
    els[2].width = "20%";
    //els[3].width = "10%";
    //els[4].width = "5%";
    //els[5].width = "5%";
    //els[6].width = "10%";
    //els[7].width = "40%";
    //els[5].width = "10%";
    // els[2].width = "200px";

    //now update the "Assigned To" column

    var columnClassName = 'ms-vh';

    var els = getElementsByClass(tableNode,columnClassName,'TH');
    els[0].width = "5%";


    //you can also update any other column (with the same class) at the same time
    //els[1].width = "150px";
    //els[2].width = "250px";
    //etc...

    }

    function getElementsByClass(node, searchClass, tag) {

    var classElements = new Array();
    if ( node == null )
    node = document;
    if ( tag == null )
    tag = '*';
    var els = node.getElementsByTagName(tag);

    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
    classElements[j] = els[i];
    j++;
    }
    }
    return classElements;
    }


    </script>
    • Proposed as answer by corporateusage Thursday, March 18, 2010 10:37 PM
    • Unproposed as answer by Mike Walsh FIN Friday, March 19, 2010 4:23 AM
    Thursday, March 18, 2010 10:36 PM
  • corporateusage

    Please do not propose your own posts as answers. It isn't helpful.

    Propose the good answers of other people and wait for someone else to propose your posts.

    (Moderator)


    FAQ sites: (SP 2010) http://wssv4faq.mindsharp.com; (v3) http://wssv3faq.mindsharp.com and (WSS 2.0) http://wssv2faq.mindsharp.com
    Complete Book Lists (incl. foreign language) on each site.
    Friday, March 19, 2010 4:24 AM
  • Hi Mike,

    I have a same proble. did you solve it?

    can please somebody tell me what can I do to export data in spreadsheet? it is necessary for me.

     

     

    Wednesday, May 19, 2010 8:21 PM
  • > can please somebody tell me what can I do to export data in spreadsheet?

    This seems to be a new question.

    If it is please post it as a new thread to the Setup .. Upgrade forum. (and explain what you mean by "export data IN spreadsheet" the "in" confuses me.)

    (Moderator)

     


    FAQ sites: (SP 2010) http://wssv4faq.mindsharp.com; (v3) http://wssv3faq.mindsharp.com and (WSS 2.0) http://wssv2faq.mindsharp.com
    Complete Book Lists (incl. foreign language) on each site.
    Thursday, May 20, 2010 9:34 AM
  • I noticed some replicated lines of code. Also getting a error and will not apply the width. Did I miss something?
    Tuesday, May 25, 2010 5:59 PM
  • HI,

    I have got another solution here.. No need to change in Designer.

    Please check this link:

    http://kjellsj.blogspot.com/2009/06/sharepoint-jquery-setting-td-column.html

    Thank you

    • Proposed as answer by Venkatzeus Thursday, July 15, 2010 7:17 AM
    • Unproposed as answer by Mike Walsh FIN Thursday, December 23, 2010 7:03 AM
    Thursday, July 15, 2010 7:17 AM
  • ·         You can accomplish this with JQuery by replacing the renders headers by inserting <br/> tags as discussed below:

    1)    Download JQuery library from www.jQuery.com

    2)    Upload the downloaded file on to a document library on your site.

    3)    Link the library on your page using <script type="text/javascript" src=""></script> tag.

    i)              Singleton tag <script type="text/javascript" src=""/> didnt work in my case. So please use explicit </script> to end the tag.

    ii)             If you are working with SharePoint 2010 you will not be able add <script> tag onto a specific page. Hence you will have add the <script> tag to the master page.

    4)    Now add a content editor webpart (HTML form webpart in SP 2010) onto your page where you need your column headers to be wraped into multiple lines to reduce the width of the columns.

    5)    Now you need to replace your column headers with the header names with break line tag as illustrated in below code.

    <script type='text/javascript'>
    $(document).ready(function(){

    $('th div a').each(function(){

    $(this).html($(this).html().replace('My 3 Digit Number Column', 'My 3 Digit<br/>Number<br/>Column'));

                });

    });

    </script>

    6)    Save your webpart and see the magic on your screen. You can add multiple replace functions on above code to reduce widths for all the columns you wish.

    Note:

    ·          This is useful only when you know that your data on the column is significantly small compared to the column name. If data is multiple line of text and you have a very large data in the column, this technique is not useful. If any of you can think of a solution for this scenario, pleagose let everyone know by posting on the forum.

    ·          You will have to export and import this webpart to each of the views on your list so that effect is visible on all the views that you wish to.

     

     

    Moderator Note: As I have already said in this thread, do NOT propose your own posts as answers. The propose as anaswer function is there for *other people* to propose good posts containing answers.
    • Proposed as answer by GreenyTech Thursday, December 23, 2010 6:23 AM
    • Unproposed as answer by Mike Walsh FIN Thursday, December 23, 2010 7:03 AM
    • Edited by Mike Walsh FIN Thursday, December 23, 2010 7:05 AM Moderator Note added.
    Thursday, December 23, 2010 5:44 AM
  • If you cant use designer, JQuery or change code etc a very simple if not elegant metod is to increase the length of your column title. e.g. if you have a column titled "Applications" you could change it to "Supported Applications" hence increasing the column width. As I said not very elegant but it works.
    Wednesday, February 02, 2011 10:24 AM