Tuesday, June 02, 2009

How to get column names to wrap in #SharePoint new item forms (NewForm.aspx)

I was asked the other day if there might be a slick CSS method for getting long column names to wrap in a SharePoint list’s new item form (NewForm.aspx). The long column names were causing a horizontal scroll at times and just plain didn’t look right.

The first thing I did was to examine the code that NewForm.aspx was presenting to the browser. I found the culprit was a <nobr> tag wrapped around the column name.
<nobr> stands for ‘no break’ and overrides the normal HTML line-wrapping. A little research yielded  the following CSS override. Basically redefining the nobr tag to allow the column name to wrap.
nobr {white-space: normal}
Armed with that info, you have a few options. You could add this to your custom style sheet or master page. This would override all instances of the nobr tag so you will have to be sure that is really what you want to do.
Another option would be to deploy the CSS on just the NewForm.aspx page for your list using SharePoint Designer. If you want to be able to make future tweaks (or remove the CSS all together) from the browser, add a web part zone to the form page and deploy the CSS in a content editor web part. This is the method I will describe here.
The high-level overview:
  1. Add a web part zone to your new item page
  2. Add a content editor web part (CEWP) to the zone
  3. Add the following code to the Source Editor of the CEWP

    <style type= "text/css">
    nobr {white-space: normal}
The details:
Browse to your list and click ‘New’ (Item)
On the File menu, select ‘Edit with Microsoft Office SharePoint Designer’
This will launch SharePoint Designer (SPD). In SPD, add a web part zone to the page. (‘New Web Part Zone’ is on the Web Part task pane)
Click the ‘Click to insert a Web Part’ hyperlink and add the Content Editor Web Part
Save the page (which will customize it from the site def)
Back in your browser, refresh the new item page
Click ‘Site Actions’, ‘Edit Page’
On the CEWP, click the ‘edit’ drop down and select ‘Modify Shared Web Part’
Click the ‘Source Editor’ button and type in the following:
<style type="text/css">
nobr {white-space: normal}
Click ‘Save’, and ‘OK’ and you should see the long column names wrap immediately
The default width for the Title column is 190px. If you want it a bit wider you could modify the CEWP source code to specify a width, like this:
Which will make that first column 225px instead.
When you have it looking right, edit the page again and edit the CEWP web part again.
Expand the ‘Appearance’ section and give it a meaningful title, like “CEWP-CSS Constrain width on new item form” and set the Chrome Type to ‘None’
You can export the web part to use elsewhere in your site if needed.


Unknown said...

Thanks for sharing this, Kevin. I like your solution better than mine, which was to simply remove the nobr tags! :)

I posted a solution for doing something similar for the Dataview column headings (AllItems.aspx): dataview column header... line break? at EndUserSharePoint.com's Stump the Panel forum.

RED! said...

Just curious... what is the advantage to go through all the trouble of css tweaks and web parts when you can simply remove the nobr??

Kevin Pine said...

red said fred - Good question. You can edit the form page in SPD and insert a custom list form. Once you do this you can simply remove the nobr tags. You will run into issues though if you add or delete columns to the list after doing that. So this CSS solution will fix the nobr problem without affecting the form itself.

Unknown said...

I am running WSS 3.0 and i dont have the option to edit the page when I am on the new item page, only when I am on the main list page. Should this work in WSS 3.0?

Unknown said...

red said fred: Another reason to modify the CSS rather than remove the nobr is that you do lose some functionality if you hide or close the default List Form Web Part. This web part will always list all of your columns in the order you direct it to in List Settings.

If you add a custom form, it will inherit all of the existing forms on creation, but if you change things later, the changes will not be reflected there. So, there are some compelling arguments for keeping the List Form Web Part, and simply modifying the CSS for this minor visual update.

cgoodwin: To edit the NewForm.aspx page, you'll need to add the following to the end of your URL in the location box:

This will you put you into Edit Mode for the NewForm.aspx page.

Unknown said...

Is there any way to use this without displaying the web part?

Unknown said...

is this possible in datasheet view?

Rich Rockwell said...

Excellent solution. And so simple. Thanks!

Angel said...

I'm not able to "Edit Page" while in the form. Is there another way to update the source code? Maybe in SPD? If so, can you explain how to do this?