Extending the size of the Rich Text Editor

Slalom Consultant Maarten Sundman

Slalom Consultant Maarten Sundman specializes in .NET, SharePoint, and Silverlight solutions and has experience in the Financial Services, Software, and Utilities and Energy sectors.

by Maarten Sundman

So an issue I’ve heard many times from end users is that the rich text editor is way too small to do verbose content. Below you’ll find some CSS which increases the size of the Rich Text Editor and the list form in general to be both wider and in the case of the RTE, taller as well. In practice with the below changes about one-third of a page will be editable on-screen at any one time.  This is for SharePoint 2007, and can be added as a new .css to your master page. Or inline to an individual page via the content editor web part.

larger RTE in SharePoint CSS

<style type=“text/css”>
/* widens the RTE field control in forms*/
#onetIDListForm, #onetIDListForm .ms-formbody, #onetIDListForm iframe[title="Rich Text Editor"]{
width:100% !important;
}
/*makes RTE control taller*/
#onetIDListForm iframe[title="Rich Text Editor"]
{
height:300px !important;
}
/* makes RTE toolbar width match control width */
.ms-long
{
width:100% !important
}
/*removes display of field label above field control and border around field control*/
DIV.ms-formfieldlabelcontainer SPAN.ms-formfieldlabel
{
display:none;
}
.ms-formfieldvaluecontainer
{
border:none !important;
}
/*widens form table altogether with scaling for different resolutions*/
.ms-formtable
{
min-width:900px;
max-width:100%;
}
</style>

- Maarten

2 Responses to Extending the size of the Rich Text Editor

  1. Bill says:

    I’m having problem witht he Font size and Font Type picker controls on the Rich Text Editor menu, not displaying when clicked.

    I have created a Input Form with several RTE Input Fields using Tabs to display smaller sections of the for. The “form sections” are contained within Container DIVs using jQuery script to mange tab navigation click events.

    RTE input fields in the first few tabs (at the top of the Form) do not display the Font size & Type selctor controls when clicked while RTE Input fields in the lower form sections work fine. Also, I have an “All” Tab that displays the entire Input/Edit form at one time, that when selected, all the same RTE Font Size and Font Type selctor controls work fine.

    Any ideas asto why all RTE Input field menu controls work when the entire form is displayed but not for the top tabs when selected?

  2. Maarten Sundman says:

    First is this SP2007 or 2010? Sounds like 2007 from the description.

    Next, did you use firebug and see if those controls are present but possibly being hidden either via styling or from positioning issues?

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: