How to get column names to wrap in #SharePoint new item forms (NewForm.aspx)
Published 06/05 courtesy of SharePoint SolutionsI 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 tag wrapped around the column name.
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:
- Add a web part zone to your new item page
- Add a content editor web part (CEWP) to the zone
- Add the following code to the Source Editor of the CEWP
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:
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.
Recent SharePoint Questions
- sharepoint Q&A function
- Customize "Send To" menu in Sharepoint 2007
- Site is opening only on Server but not on other clients. How to fix this?
- Handy & Free of Charge SharePoint Tools
- One Document - two sites
- What is the difference between a document library and a form library?
- What is Collaborative Application Markup Language?
- • What is the difference between SharePoint Portal Server and Windows SharePoint Services?
- Why should you use SharePoint?
- Displaying columns
more sharepoint questions
More Articles By SharePoint Answers
Backup strategy for BPOS
I’ve been using the MS Business Productivity Online Suite for 2 months now. I’m more than happy about it, it really saved me a lot of time setting up the…
Give Blood to your Workflow
Give the gift of life.
What does this have to do with SharePoint workflows? Last week I was teaching our Mission: Automation class where we cover InfoPath and workflows created…
Survey: 55% Experiencing sharepoint Infrastructure Pain
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… I’ve talked to a number of folks in recent months that have wanted to add the links stored in a user’s My Links list in their My Site to other… For a couple of reasons, Mission: Automation – SharePoint Workflow and InfoPath is one of my favorite classes to teach.
Survey: 55% Experiencing sharepoint Infrastructure Pain
CMSWire
In a recent IDG Research Survey of 108 SharePoint, 82% indicated that they use sharepoint primarily for file sharing and ...More Articles Under "Articles"
How to get column names to wrap in #SharePoint new item forms (NewForm.aspx)
The My Links Web Part – It’s Not Just for My Sites #sharepoint
SharePoint Workflow and InfoPath Training… Online! #sharepoint
Most Viewed Content
- Develop Mobile Applications for SharePoint with Mobile Entree - CMSWire
- Bamboos Year in Review: Marc OBrien Introduces the Bamboo Online…
- Working with the Admin Links on your SharePoint Blog
- This Week in Bamboo (June 28th - July 4th, 2009)
- Cisco Plans Office-Like Service, Andreessen Begins a Silicon Valley Venture…
