Hope this isnt too complicated:
I searched and found that if you have a nested collapsible panel within another, you can fix the downward expandible problem by changing line 431 of SpryCollapsiblePanel.js from:
this.content.style.height = this.toHeight + "px";
this.content.style.height = "auto";
I'm having a similar problem only I have a collapsible panel nested into one of the tabs of a spry morphing panel. When clicked the collapsible panel expands downwards under the border of the morphing panel, so the content cannot be seen. The above fix did not work.
Here is a link to a morphing panel sample:
My collapsible panel is nested within the second tab at the bottom.
Anyone have a fix for this?
I wrapped the collapsible panel in a div with an overflow of hidden and that didnt work, I also played around with the SpryMorphPanels.js but couldnt come up with anything.
100+ views, any takes on this?
Gramps your magic is needed.
Maybe the markup would help:
<div id="ex1" class="liveSample">
<ul id="ex1-tabs" class="SimpleTabs" style=" font-size:16px;">
<li><a href="#ex1-s1" >Card</a></li>
<div id="ex1-s1" class="section">
<div id="ex1-s2" class="section">
<div class="content" align="left" style="font-family: Lekton;">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div id="ex1-s3" class="section">
<div class="content" align="left">
<h2>References by this Author</h2>
My most creative moments occur when I have time off from my projects and my mind goes into free fall.
I have recreated your setup and clearly see the problem. It will take some time for me to figure out a solution, but sadly I do not have that luxury at this point in time. My projects tend to have been scheduled (by my clients) to be ready by yesterday.
I think that the answer should be sought in creating a new collapsible panel widget based on Spry Pre-Release 1.7, using SpryDOMUtils, SpryDOMeffects and SpryWidget. SpryPanelSet can be used as an example.
Hopefully someone can try this out.
I'm pretty sure im using spry 1.7.
I have removed the collapsible panel and used a css3 accordion with the same results...so im pretty sure the problem is with the morphing panels not accepting any embedded height adjustment properties.
Ive played around with the js file with differeint results but not the desired one, I believe the solution lies in lines 108 to 123 of the SpryMorphPanels.js file, the way it calculates the max height does not give room for an external embedded file:
var cw = this.element.offsetWidth;
var ch = this.element.offsetHeight;
var nw = Math.max(panel.offsetWidth, this.minWidth);
var nh = Math.max(panel.offsetHeight, this.minHeight);
var widthProp = "";
var heightProp = "";
if (cw != nw)
widthProp += "width: " + nw + "px;";
if (ch != nh)
heightProp = "height: " + nh + "px;";
var firstEff = null;
var lastEff = null;
Ill wait a little longer for some help on a solution otherwise ill have to scratch spry from the page which will put me back quiet a bit.