Skip navigation
SpryNet
SpryNet Calculating status...
Currently Being Moderated

Collapsible panel in morphing panel

Jun 1, 2012 4:35 AM

Hi,

 

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";

 

to:

 

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:

 

http://labs.adobe.com/technologies/spry/ui/samples/MorphPanelsSample.h tml

 

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.

1235 Views   3 Replies   Latest reply: SpryNet, Jul 2, 2012 3:54 AM
 
Replies
  • SpryNet
    Currently Being Moderated
    1. SpryNet,
    Jun 12, 2012 12:12 PM   in reply to SpryNet
    Report

    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>

    <li><a href="#ex1-s2">Biography</a></li>

    <li><a href="#ex1-s3">References</a></li>

    <li><a href="#ex1-s4">Articles</a></li>

    </ul>

                     <div class="content">

            <div id="ex1-s1" class="section">

                <div class="content">

                                   content1              

                               </div>

                                                    </div>

                <div id="ex1-s2" class="section">

                <div class="content" align="left" style="font-family: Lekton;">

    <h2>Biography</h2>

    <div id="CollapsiblePanel1" class="CollapsiblePanel">

    <div class="CollapsiblePanelTab" tabindex="0">Tab</div>

    <div class="CollapsiblePanelContent">

    <p>Content</p>

    <p>info</p>

    <p>info</p>

                          </div>

                    </div>

     

    </div>

    </div>

                <div id="ex1-s3" class="section">

                <div class="content" align="left">

    <h2>References by this Author</h2>

    </div>

                                                    </div>

    </div>

    </div>

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    2. Ben Pleysier,
    Jun 12, 2012 6:08 PM   in reply to SpryNet
    Report

    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.

     

    Gramps

     
    |
    Mark as:
  • SpryNet
    Currently Being Moderated
    3. SpryNet,
    Jul 2, 2012 3:54 AM   in reply to Ben Pleysier
    Report

    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.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points