Monday, October 18, 2010

SharePoint - How to change width of rich text columns on forms?

If you want to change the width of any of the columns on the data entry forms (NewForm.aspx, EditForm.aspx, DispForm.aspx) you need to know the name of their associated style in the core.css. You can do this several ways, use IE8 Developer Toolbar (F12), I prefer to use SharePoint Designer and look at the Apply Styles – Show Styles Based On Selection.

Then you again have a few ways you can change that. If you want the change global then you could create an Alternate CSS adding something similar to below in it.

When I need to change them it is usually just for the one page for one site, so I just add a style reference in the page.

The most bothersome one for me is always the rich text field. Here is the entry to widen the rich text field.

<style>

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

#onetIDListForm, #onetIDListForm .ms-formbody, #onetIDListForm iframe[title="Rich Text Editor"]{
width:600px !important;
}
</style>

Of course you could use JavaScript, but I prefer to use CSS when possible.

del.icio.us Tags: ,,

Digg This

4 comments:

  1. Great. This is what I was looking for. In IE8 ms-long change alone does not work.

    ReplyDelete
  2. Where do you put the STYLE tag in the NewForm.aspx file?? I cannot seem to get this to work :(

    ReplyDelete
  3. Put the style section directly under

    ReplyDelete
  4. Thank you for this information. Our sharepoint 2010 site is still configured to be compatible with IE8, and ms-long alone did not resize the rich-text-edit field (it did resize the toolbar though! :-) ). Your information worked like a charm!

    ReplyDelete