ASP.Net Ajax Collapsible Panel Style Bug with Absolute Positioning

25 Jul

I’ve been working extensively with ASP.Net Ajax, and the Ajax Control Toolkit in SharePoint/MOSS, which I’ll try to document more later, but I wanted to toss a note up here about a problem I lost alot of time to with the CollapsiblePanel extender in the Ajax Control Toolkit.

The javascript for the Collapsible Panel does some trickery during a collapse/expand, involving creating a new child div, and moving all the children into that div. Here’s the section from the js file:

<span class="rem">        /// &lt;summary&gt;</span><br />       <span class="rem">/// Set up a child div to host our panel contents</span><br />       <span class="rem">/// and then push the panel's children into it.</span><br />       <span class="rem">/// &lt;/summary&gt;</span><br /><br />      <br />       <span class="kwrd">var</span> startSize = <span class="kwrd">this</span>._getTargetSize();<br />      <br />       <span class="kwrd">var</span> e = <span class="kwrd">this</span>.get_element();<br />              <br />       <span class="kwrd">this</span>._childDiv = e.cloneNode(<span class="kwrd">false</span>);<br />       <span class="kwrd">this</span>._childDiv.id = <span class="str">''</span>;<br />      <br />       <span class="rem">// move all children into the div.</span><br />       <span class="rem">//</span><br />       <span class="kwrd">while</span> (e.hasChildNodes()) {           <br />           <span class="kwrd">var</span> child = e.childNodes[0];<br />           child = e.removeChild(child);<br />           <span class="kwrd">this</span>._childDiv.appendChild(child);               <br />       }<br />

As you can imagine, adding an intermediate container around all your child elements and cloning the parent style to it can wreak havoc with certain types of styling, especially relative and absolute positioning. In my case the page would start to load and look correct, then as the script kicked in all my positioning values would be doubled and all child elements would shift position.

In the current ASP.net Ajax release they tried to fix this problem by adding a few more lines of javascript.

        <span class="kwrd">this</span>._childDiv.style.position = <span class="str">""</span>;<br />       <span class="kwrd">this</span>._childDiv.style.margin   = <span class="str">""</span>; 

As you can see, they understand a non-default position style would cause a problem, and they try to blank it out. But as you’ll notice they only do this on the style tag, they can’t do anything about the CSS class you may have associated.

For me, the solution turned out to be easy, I moved my position styles from the associated CSS class into the style tag on the element, so the script would take care of the problem for me. Worked like a charm.

Alternatively you could make some modifications to the javascript for your fix. (CollapsiblePanelBehavior.js) and recompile the AjaxControlToolkit.

Hopefully this is enough information to help anyone solve their related problem.

Tweet about this on TwitterShare on Google+Share on FacebookShare on RedditEmail this to someoneShare on LinkedInShare on StumbleUpon

Leave a Reply

Your email address will not be published. Required fields are marked *