2

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.

4 Answers 4

1

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.

1

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.

Sudhir

0

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.

2
  • Sorry, I've been distracted. The site is Moss 2007.
    – user1146
    Aug 25, 2010 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, 2010 at 23:18
0

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%;} td.ms-bodyareaframe 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:

td.ms-formareaframe table.ms-propertysheet table.ms-propertysheet, table#onetIDListForm, table#onetIDListForm .ms-formbody span table.ms-long, table#onetIDListForm .ms-formbody span span table.ms-long, table#onetIDListForm .ms-formbody input.ms-long, table#onetIDListForm .ms-formbody textarea.ms-long, table#onetIDListForm .ms-formbody table.ms-long, table#onetIDListForm .ms-usereditor, table#onetIDListForm .ms-RadioText { width: 100% !important; } table#onetIDListForm .ms-formbody span span div iframe, table#onetIDListForm iframe.ms-rtelong { width: 100%; } table#onetIDListForm .ms-formbody, table#onetIDListForm #formTbl .ms-formbody span input.ms-input { width: 99.1%; } td.ms-formbody table.ms-rtetoolbarmenu { width: ; } td.ms-dtinput input.ms-input { width: 136px !important; } span#partAttachment td#attachmentsOnClient, span#partAttachment td#attachmentsOnClient span input.ms-fileinput { width: 90% !important; } table#onetIDListForm .ms-inputuserfield { width: auto !important; } table#onetIDListForm .ms-formbody span table.ms-long td.ms-input { width: 33%; } table#onetIDListForm .ms-formbody span table.ms-long td.ms-input div { border: 1px solid #b2b2b2 !important; overflow-x: hidden !important; width: 100% !important; *width: 99% !important; } table#onetIDListForm .ms-formbody span table.ms-long td.ms-input 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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.