Skip Ribbon Commands
Skip to main content
Sign In
Zach Rosenfield
SharePoint Program Manager, Infrastructure
 RSS Feed
Zach Rosenfield's SharePoint Blog > Posts > SharePoint 101: Full Width Rich Text Editor
March 19
SharePoint 101: Full Width Rich Text Editor
by  
  on 3/19/2009 4:09 PM
Category: SharePoint 101
It can be a little frustrating in SharePoint when the "Rich Text Editor" on the edit page of Wiki's, Blogs, or on certain lists is set to fixed column width.  I certainly find it easier to blog in a fullscreen-width editor!
 
Here's the CSS to make it happen (warning, this syntax applies to ALL rich text editors!).   The first does all normal forms and wikis:
 
#onetIDListForm, #onetIDListForm .ms-formbody, #onetIDListForm iframe[title="Rich Text Editor"]{
 width:100% !important;
}
 
And this does the same for Blogs!

.ms-formbody span span div iframe, .ms-formbody span span table.ms-long{
 width:100%; text-align:left;
}

Hope this helps.
Permanent Link to Post | Email Post Link | Number of Comments 8 Comment(s)

Comments

Awesome!

I've been searching for this forever.  This is the only thing I found that works.  Thanks a bunch!
 on 3/21/2009 3:10 PM

Help

I'm sure this is what I need, but I place it in my core.css and it doesn't seem to have an effect.  I'm only using the first piece as I don't have any blogs.  I'm at a bit of a loss....
 on 3/31/2009 10:37 AM

Re: Help

I would not recommend editing the core.css--instead you should add a link to your own custom css in your master page.  Essentially, go into the <HEAD> tag of your master page and add this:

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/yourCSSFileName.css%>" runat="server"/>

and then upload your css file into the "Style Library" folder (you can use an alternate location if you want).
Zach (SharePoint - MSFT)No presence information on 4/3/2009 12:35 PM

Need both even if not using blogs

I was having the same issue as the second poster -- I'm not using blogs so I only (initially) used the first set of CSS statements.  This expanded the shaded area under the rich text editor, but not the textarea itself.  When I added the second set of commands, the text area expanded as well (I believe because it contains table.ms-long).

Many thanks for this!
 on 5/15/2009 9:57 PM

relating to width

Thanks for the good post here Zach, this is most informative. I am looking to resize the width a Single line of text in SharePoint designer for a SPS site and having a devil of a time! It kicks out to width =204, which may very well be width = 100%. While I have tried many things, I am still coming up short - what can you advise? Thanks again for your excellent SP resources here.
 on 5/22/2009 5:23 PM

Only a transient effect in SharePoint Services 3.0

After backing up the core.css I just appended the two above commands into core.css. First I could not realize any effect, but after restarting my server, the available text width had doubled. However, the overall effect is just transient: whenever I click into the text area to set the cursor and edit the text the view changes back to the narrow width.

Any ideas what to do?
 on 9/7/2009 9:36 AM

CSS does the magic!

Hi Zach,
This article really helped me. It seems that CSS tricks are the best solution to modify the look and feel of the site. I was searching for the CSS classes related to rich text editor, but was not able to find. Your article helped me understand how to get this done. Thanks. Keep up the good work.
 on 3/8/2011 8:07 PM

Thanks for the tip!

works a treat
 on 8/18/2011 12:37 AM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Comments *


Name (required) *


Human Test


Checking if you're human: enter "1234" (no quotes)

Attachments