HOW TO: Enlarge display of the multi-line text field in a custom Sharepoint list

ANYONE USING SHAREPOINT LONG ENOUGH
has noticed just how aggravating the default 384px wide multi-line text fields can be…

Surprisingly, this is NOT controllable at the “control” level, but once again just requires some CSS tweaking…

Nick Grattan offered up a very elegant article which provides a fix to at least one kind of text control:
http://nickgrattan.wordpress.com/2008/12/01/increasing-size-of-rich-text-editing-control/#comment-832

HOWEVER, I just wanted to share one additional tidbit – that some of (simpler?) multi-line text controls in fact are controlled NOT by the ‘.ms-rtelong’ class, but rather by the ‘.ms-rtelonger’ class (I kid you not – that’s what it’s called)…

So, IF you’ve got ONE form or website where you’d like to make the change:
1. LAUNCH Sharepoint Designer;
2. LOGIN to the offending website;
3. BROWSE to the page with the control you wish to resize;
4. OPEN that form (e.g. EditForm.aspx);
5. LOCATE the ASP Content Placeholder for that control in the source code;
6. ADD either one of the following snippets:

OR

IF on the other hand you’re tired of these controls being wimpy period, and wish to enlarge them GLOBALLY,
1. LAUNCH Sharepoint Designer;
2. LOGIN to the offending website;
3. BROWSE to the core.css file for the website (typically under /_layouts/styles/core.css I think);
4. OPEN the core.css file;
5. LOCATE the defs for .ms-rtelong and .ms-rtelonger;
6. CHANGE these defs to include the following:
.ms-rtelong {
width:700px;
height:600px;
}

.ms-rtelonger {
width:700px;
height:600px;
}

Here’s a screenshot of my daily journal (custom list) EditForm.aspx page, with the main text box now sized to something USEFUL :

Rich Text Field resized as a result of modiying .ms-rtelonger class in core.css

Cheers,
-MV
Advertisements
This entry was posted in Sharepoint Tips and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s