SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a site set up as a Blog Template. I want to use jQuery to expand the size of the text boxes for blog posts in both Viewing and Edit mode (and new mode).

Viewing mode is easy. I edited /Lists/Posts/Post.aspx and added a CEWP containing a reference to jQuery and Code: jQuery('.ms-PostWrapper').width(800);

I tried to do the same thing in /Lists/Posts/EditPost.aspx and it doesn't work in IE. It works in Firefox but that just shows literal HTML tags.

So how do I get this to work in IE? I can see there's already some IE-specific Javascript going on. Any advice would be appreciated.

share|improve this question

I may be using a different version of SP or not looking at the same thing - But for my blog posts, the form items actually are: ms-rtelong and ms-long

The ms-rtelong is actually an iFrame which contains the Rich Text Editor.

share|improve this answer

Just try to look at the HTML rendering.

  • Open the site on Internet Explorer.
  • RightClick > View Source In the html
  • try to locate your text box. Analyze the html.
  • Then you can look onto the jQuery selectors to get correct element.

It would be great if you can paste the HTML in this discussion and we can try to help you with appropriate selector.


share|improve this answer

Are you working with 2007 or 2010?

It should be possible to do this pretty easily, but without knowing what version you're on it's hard to poke through the DOM.

share|improve this answer
Sorry, I've been distracted. The site is Moss 2007. – user1146 Aug 25 '10 at 1:02
@webdes03: Would be better to move this as a comment to the question as this isn't an answer. – Alex Angas Sep 19 '10 at 23:18

Actually, you should be able to accomplish that with pure CSS. Try the following.

  • For Blog Post display pages:

.ms-PostWrapper, .ms-commentsWrapper, .ms-CommentFooter {width: 100%;} table#MSO_ContentTable tbody tr td table, #part1 .ms-formtable .ms-formbody, #part1 .ms-formtable ms-formbody span, #part1 .ms-formtable .ms-formbody .ms-long {width: 100% !important;} #part1 .ms-formtable .ms-formlabel {width: 12% !important;}

  • For Blog Post edit pages:, table#onetIDListForm, table#onetIDListForm .ms-formbody span, table#onetIDListForm .ms-formbody span span, table#onetIDListForm .ms-formbody, table#onetIDListForm .ms-formbody, table#onetIDListForm .ms-formbody, table#onetIDListForm .ms-usereditor, table#onetIDListForm .ms-RadioText { width: 100% !important; } table#onetIDListForm .ms-formbody span span div iframe, table#onetIDListForm { width: 100%; } table#onetIDListForm .ms-formbody, table#onetIDListForm #formTbl .ms-formbody span { width: 99.1%; } { width: ; } { width: 136px !important; } span#partAttachment td#attachmentsOnClient, span#partAttachment td#attachmentsOnClient span { width: 90% !important; } table#onetIDListForm .ms-inputuserfield { width: auto !important; } table#onetIDListForm .ms-formbody span { width: 33%; } table#onetIDListForm .ms-formbody span div { border: 1px solid #b2b2b2 !important; overflow-x: hidden !important; width: 100% !important; *width: 99% !important; } table#onetIDListForm .ms-formbody span div select { border: none !important; width: 109% !important; *width: 102% !important; *margin-left: -3px !important; *margin-top: -3px !important; }

EDIT: I tried to pretty format the CSS code but unfortunately couldn't get it working. Sorry!

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.