Nested Spry Collapsible Panels
I ran into a project where I wanted to be able to use nested Spry collapsible panels in Spry 1.6.1 but I saw that when I expanded the child panels that they expanded over the border of the parent panel. I'll try to get a sample up soon to show how it didn't work correctly for me. But in the mean time, you can fix it by opening up SpryCollapsiblePanel.js (within a SpryAssets folder is you added the panel via Dreamweaver) and go to line 431, which reads:
this.content.style.height = this.toHeight + "px";
Change that to:
this.content.style.height = "auto";
And you should be good to go. The first fix I had tried set the height to an empty string which worked for any panel that doesn't have a height set in the CSS for the content. If you do have a height set in the CSS for the content, then setting the height to an empty string causes the CSS to take effect and if the CSS height is different than the height that Spry determined the content of the panel to be when the panel opens, then you could get some jumping as the animation finishes and then the height adjusts to the value set in the CSS.
Labels: Spry


3 Comments:
Great tip!
Danilo , you're the man! Two days of trouble shooting and it was that simple. I even found your post on the Spry Framework forum. You would think that they would take you a bit more seriously. I'm sure we're not the only one's with that problem.
www.interactivebynature.net
Thanks for the cure. I discovered the problem only in Firefox. MSIE 7 handled the nested panels OK but Firefox 3.04 pushed the outer html down below the surrounding container when the innermost collapsible panel was expanded.
This fix, fixed it for sure.
See the results here at www.sjpd.org/CrimeStats/CrimeReports.html
Post a Comment
Links to this post:
Create a Link
<< Home