Saturday, July 03, 2010

Wrap the Title (name) of SharePoint List Columns

If you have a SharePoint list or Library with long column names the views might look awkward because the column name is spread out in one line while its content may be as a short as Yes/No.

To work around this issue, add a Content Editor Web Part to the list and type 3 lines of code into it. The result will look like this:








Here are the steps to achieve such results:
(the sequence is for 2007 release. 2010 is pretty similar)
  • Navigate to the list.
  • In Site Actions select Edit Page.
  • Click Add a Web Part and navigate to select the Content Editor Web Part.
  • Click the link inside the WP or click Edit to open the WP settings area on the right.
  • (see an image at the bottom)
  • Click the Source Editor... to open it.
  • Enter the following code:  (within the style tags)

    td.ms-vb {white-space: normal !important}
  • for 2010 release use: th.ms-vh2 {white-space: normal !important}


  • Okay the operation and Exit Edit Mode.
    Tip: Don't forget to hide the WP title by changing its Chrome Type in Appearance to none.
  • The titles should now be wrapped.
WP Setting area is on the right:




23 comments:

  1. This did not work for me. Is this with Sharepoint 2010 or 2007? I tired it with 2007.

    ReplyDelete
  2. This is a 2007 post. If you enter the exact code it should work:

    td.ms-vb {white-space: normal !important}

    Make sure that you use the curly brackets.
    It won't work for 2010.

    ReplyDelete
  3. If anyone is interested, the code for Sharepoint 2010 is:
    th.ms-vh2 {white-space: normal !important}

    ReplyDelete
  4. Thanks for the tips. Worked like a charm!

    ReplyDelete
  5. Hi
    The code works fine, but I accidentally left the / out of the closing style tag and now my list is a blank page and I am unable to even Edit Page anymore.. any ideas???
    Thanks

    ReplyDelete
    Replies
    1. Open the page, then switch to its maintenance view by appending &contents=1 or ?contents=1 to the URL. The maintenance page will show all the Web Parts consisting that page. Delete your CEWP in error. You should be able now to open the list and add another CEWP with the correct code.

      Please let me know if this worked for you.

      Delete
  6. That worked beautifully - thank you :)
    Saibeth

    ReplyDelete
  7. I tried doing this on the NewForm page but it didn't work. Is there anything else I need to do?

    ReplyDelete
  8. You may need to use SharePoint Designer. I didn't try it but see the post here:
    http://sharepointsolutions.blogspot.co.il/2009/06/how-to-get-column-names-to-wrap-in.html

    ReplyDelete
  9. I have seen this posted in many forums. The only problem I have with this solution when using it with a list is that by adding a web part to a list, you lose the views dropdown at the top of the page.

    ReplyDelete
    Replies
    1. Indeed.

      I usually use it in a separate web part page that contains the list and the code web parts.
      If needed, a manual links list can be added to provide access to the views.

      Delete
  10. You are awesome! Worked perfectly!!!

    ReplyDelete
  11. Hi, thanks for the above recommendation, wondering if you've encountered the content not wrapping instead of the title(name). This problem has been bugging me for a while and so far I still can't find the solution.

    ReplyDelete
    Replies
    1. Have you changed the name of the Title column?

      Delete
    2. Nope. No change to the title column name.
      Here's an example:
      My current content is showing the word 'red' truncated to the next line and the ideal should be the whole word 'red' going to the next line.

      1. Current:
      Title
      99 red balloons 99 re
      d balloons 99 red bal
      oons

      2. Ideal:
      Title
      99 red balloons 99
      red balloons 99 red
      balloons

      Unsure if you can understand what I'm trying to explain.

      Delete
    3. Now i got it. I have never encountered a problem with wrapping content by splitting words. I have done several tests including in a different language but could not create such a case.

      Delete
    4. No problem, thanks for trying.. will continue to look for solutions. :)

      Delete
  12. Thank you for the post. This worked well for all LVWP in my webpart page too!

    ReplyDelete
  13. How do you get this functionality on the list itself without making a web-part? Seems like the web-part is more of a work-around.

    ReplyDelete
    Replies
    1. Anything you do to achieve this wrapping will be a work-around. Programmers can do it by adding HTML, Javascript or JQuery code to the page. Non-programmers like myself can do the same but with the CEWP. This is just like adding code / HTML.

      Delete

Enter your comment here