CSS Styles lost on re-render

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 CSS Styles lost on re-render

After it's imported CSS Styles lost on re-render

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!


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.



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.

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!


Category: 2010 Time: 2011-01-24 Views: 1
Tags: 2010

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.217 (s). 12 q(s)