Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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 http://www.delphi-ts.com/blogs/lozzi/image.axd?picture=2011%2f1%2fdisplay_good.jpg

After it's imported http://www.delphi-ts.com/blogs/lozzi/image.axd?picture=2011%2f1%2fdisplay_bad.jpg

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
temp.WriteLine("</div>");

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!

UPDATE

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

<p></p>    
<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'>
<tr>
<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.

Thanks!

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
add comment

2 Answers 2

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
add comment
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 http://stackoverflow.com/questions/2419749/jquery-get-selected-elements-outer-html. 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!

Thanks,

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

Your Answer

 
discard

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.