Nick Grattan's Blog

About Microsoft SharePoint, .NET, Natural Language Processing and Machine Learning

Increasing size of Rich Text Editing Control

with 6 comments

When using the rich text column type in SharePoint lists the edit control has a fixed width of 384 pixels. This is often too small for easy editing.

The width of the control used to edit rich text is set through the ms-rtelong style. You can change the width using the style in the core.css or other style sheets you may be using. However, this will change the width for every use of this control in your site.

If you need to change the width for a single form, open the form in SharePoint Designer and add a style defining ms-rtelong at the top of the content place holder in which the form is displayed with new dimensions, e.g.

<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

<style type=”text/css”>
.ms-rtelong {
 width:700px;
 height:600px;
}
</style>

You can do this for standard uncustomised forms (e.g. NewForm.aspx) or for pages you create using the custom list form web part.

Advertisements

Written by Nick Grattan

December 1, 2008 at 3:50 pm

6 Responses

Subscribe to comments with RSS.

  1. Greetings Nick,

    Nice posting – this is something I was seeking for awhile, but I was trying to change the control itself. Per usual, all the “customizing” in Sharepoint once again happens in CSS – NOT in the control code (when will I learn?)…

    NOTE – I was actually trying to enlarge what I thought was a rich text box on the EditForm.aspx page of a custom list in WSS3. When I tried your modification to the CSS class .ms-rtelong, nothing happened. 😦 …

    I thought it was a conceptual error on my part, since as a developer/architect I don’t really find myself messing with the master pages, page layouts of the like. So I went directly to the core.css file of my website, found the .ms-rtelong class def there, and modified at-the-source as it were…

    Again, NO change in my page.

    😐

    So, I fired up IE with the IE Developer Bar, and really started looking at what class WAS controlling the form control I wanted to enlarge…

    … and it turned out to be “.ms-rtelonger”
    :-O

    Though in retrospect I could have gone back & edited ONLY the EditForm.aspx page on that one custom list, I still had the core.css file open (and I HATE the wimpy default width of ALL text boxes), so I thought “what the heck, let’s go for broke”, and added width:600px; height:500px; to the def for .ms-rtelonger …

    … it worked perfectly !

    (…AND THERE WAS MUCH REJOICING…)

    Now mother’s are naming their children (even the daughters) “Nick”, in honor of your tip providing the much-needed stimulus for fixing this aggravation.

    Maybe others also read this post and had the same initial (bad) luck as me? Try messing with the .ms-rtelonger class as well.

    Thanks again for a much-appreciated post.

    Cheers,
    -Mark Vogt

    Mark Vogt

    August 3, 2009 at 2:08 pm

  2. Nick,
    Thanks for this tip!

    Mark,
    Did you copy paste the CSS from above? If so, that would explain why you didn’t see any changes. It is due to the incorrect quotes in ”text/css”. Make sure you replace them with regular “double quotes”, otherwise the CSS won’t apply.

    Parag Mahalley

    September 10, 2009 at 4:17 am

  3. Thanks,

    Saved my day, have been searching whole day for this

    Reddy

    May 25, 2010 at 8:32 pm

  4. hi, good workk..
    keep it up..
    Thanks a lot…

    siva

    November 10, 2010 at 12:28 pm

  5. Good work.. Thanks..
    I also came across this link for resizing richtext control. http://www.a2zmenu.com/Blogs/SharePoint/Resize-SharePoint-richtext-control.aspx

    Prakash

    July 29, 2012 at 8:57 am


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

%d bloggers like this: