ASP.Net Ajax Collapsible Panel Style Bug with Absolute Positioning

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:

        /// <summary>
       /// Set up a child div to host our panel contents
       /// and then push the panel's children into it.
       /// </summary>

      
       var startSize = this._getTargetSize();
      
       var e = this.get_element();
              
       this._childDiv = e.cloneNode(false);
       this._childDiv.id = '';
      
       // move all children into the div.
       //
       while (e.hasChildNodes()) {           
           var child = e.childNodes[0];
           child = e.removeChild(child);
           this._childDiv.appendChild(child);               
       }

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.

        this._childDiv.style.position = "";
       this._childDiv.style.margin   = ""; 

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.