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 created a custom SharePoint 2010 web part whose purpose is to wrap other webparts with JQuery to create an accordion. It works, however the styling of the imported webparts look like they lost some CSS.

Correct SP Styling

After it's imported

And here's how I'm importing it

WebPart wp = this.WebPartManager.WebParts[w];
temp.WriteLine("<div class=\"noindex ms-wpContentDivSpace\" id=\"WebPartWPQ2\" >");
wp.ChromeState = PartChromeState.Normal;
wp.ChromeType = PartChromeType.TitleOnly;
wp.RenderControl(temp); //re-render the WP to this control
wp.Hidden = true; //now hide the first initial wp

Looking at the html, they are quite similar, and I added the above div tag to match them up. Am I missing something? Do you want the actual HTML as well? Let me know!


I switched from the above code and decided to use JQuery with AppendTo. I am doing the following jQUery

var thewpDiv = $("#" + wpDivID);

where wpDivID is div_a0044a86-16b3-4bf7-bb2b-f756f09ef1be, ID of the div I know about from the following

<div class="ms-rtestate-read ms-rte-wpbox">
<div class="ms-rtestate-notify  ms-rtestate-read a0044a86-16b3-4bf7-bb2b-f756f09ef1be" id="div_a0044a86-16b3-4bf7-bb2b-f756f09ef1be">
<table style='width:100%' cellpadding='0' cellspacing='0'>
<td id="MSOZoneCell_WebPartWPQ2"...

When I look at the html() of the element, it startes at the table tag. I then grab .parent() of this item and I can see the div of my ID. So then I try .parent().parent() hoping to get the top DIV, but then I grab the entire content area, including other web parts. It appeaers to skip over the top div as noted above.


share|improve this question
One of the things you have to watch out for is SharePoint's bad HTML. I've found plenty of unclosed tags in vanilla pages, which can cause unexpected results with jQuery. In this case, var thewpDiv = $("#div_a0044a86-16b3-4bf7-bb2b-f756f09ef1be").closest("div"); should give you the top div in the grey box above. – Marc D Anderson Jan 25 '11 at 3:25

David: Your 'wrapping' may have thrown off a CSS selector. (There's really no need for the extra Web Part, I don't think.) What I'd do is inspect the headers which look off in the two situations using Firebug or the Developer Tools and see what the difference is in the applied CSS, and then make a fix. M.

share|improve this answer
Thanks, I did that and did find some other small changes. However, in this mode, with the re-render, I cannot modify these web parts... I'm looking into a JQuery solution now with detach and appendTo. Thanks, David – David Lozzi Jan 24 '11 at 21:29
You shouldn't need to alter the Web Parts at all to use the jQuery, assuming you can get your selectors right. In fact, you can do any needed wrapping in the jQuery itself. – Marc D Anderson Jan 24 '11 at 21:39
Yeah, i thought so to, I grabbed the div tag that is the web part, and detached and then appended it to an empty div tag (place holder) and it looked the same as my above example. I decided to move forward with the jquery method but now when I add this web part to a page and a calendar, the SP gui wipes out the entire page content and errors on save. However plays nicer through SPD... I was surprised to see no one else has made this, but now I'm guessing why that's the case... – David Lozzi Jan 24 '11 at 21:42
If you end up duplicating the wrapping div's id, you'll probably be fine in SharePoint Designer (it's a "fake" render) but have a messy error in the browser. – Marc D Anderson Jan 24 '11 at 21:53
up vote 1 down vote accepted

so apparently JQuery .html() selects the innerHTML, not the outer. found a little snippet of code which grabs the outer, ref I've confirmed the entire webpart is now being copied correctly, and i still have design issues. Im going to look at either ceating an alternate style sheet copying the core.css, or using JQuery, maybe strip the wrapper webpart's default style elements...

UPDATE Got it! the wrapper was automatically being assigned a style, i used a little jquery to get rid of ms-WPBody and noindex and BLAMO, styling is PERFECT. THanks for your help Marc!


share|improve this answer
Awesome that you figured it out! – Marc D Anderson Jan 25 '11 at 21:46

Your Answer


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

Not the answer you're looking for? Browse other questions tagged or ask your own question.