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
posted by Danilo Celic @ 6:31 PM
7 Comments
Links to this post
7 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
hello danilo, i happened to read your solution for nesting collapsible panel into collapsible panel, cool.
but is there a similarly easy fix for the tabbed panel?
i am nesting a collapsible panel into a tabbed panel and the same effect occurs, that the extended nested panels flow over the containing tabbed panel space. here the url with the problem: http://www.bluemood.org/wyn/destinations/sailing-to-koh-dam.html
great, in case you've got a tip :) moni
@moni,
I made a quick test and it seems that a collapsible panel within a tabbed panel does seem to work out ok. I checked your page and it appears that you've floated a DIV that contains the collapsible panels. That may be part of the issue. I'd suggest asking over at Spry forums, maybe someone has a better idea on what this is.
Worked for me too.
My Intranet pags were built for IE 6 and created in Dreamweaver CS3.
Everything worked fine until we upgraded to IE 7 then the Collapsible Panels broke.
The nested panels were sliding under the top level panels, effectively hiding content.
Your fix did the trick. Changed the panel height to "auto" and it instantly fixed the problem.
Thanks for the great tip Danilo
Post a Comment
Links to this post:
Create a Link
<< Home