Skip navigation
Currently Being Moderated

Spry collapsible wont expand down

Apr 6, 2011 1:58 AM

When I put a new div container with content in the Spry Collapsible Panel, the content drops out below both the new container and the .CollapsiblePanelContent on resize smaller - after the panel is closed and re-opened.

 

http://96.0.181.107/spryprob01/sprycollapsibletest.html

 

Tried height settings but they seem to have no effect on any CSS property. Can't find anything that says you can't put a div in one of these, just that you can't add margin or padding...did i miss something?

 

Why doesn't .CollapsiblePanelContent expand down to fit the content?

 

 

CS4/ Mac 10.5.8/Safari, Firefox

 
Replies
  • Currently Being Moderated
    Apr 6, 2011 6:33 AM   in reply to onefiftymph

    Thank you for a clear and concise question.

     

    The short answer, open SpryCollapsiblePanel.js, go to line 431 and change

    this.content.style.height = this.toHeight + "px";

    to

    this.content.style.height = "auto";

    In the illustration, however there is no need for a div to be placed inside the panel. Have a look at the following example

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryCollapsiblePanel.js"></script>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
    <style>
    .CollapsiblePanelContent p {
        margin: 1.5em 20px;
    }
    </style>
    </head>

    <body>
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
      <div class="CollapsiblePanelContent">
        <p>Facilisi bis dolore ne consectetuer pneum genitus torqueo consequat ut vulpes at, luptatum abdo uxor. Ludus torqueo consequat pala humo zelus et olim sino metuo nullus amet virtus facilisi. Nullus pagus jugis vel ad diam. Vel veniam, dignissim incassum, natu ad paulatim consequat antehabeo gemino nunc sino occuro valde tego.</p>
        <p>Exputo exerci consequat transverbero ne aliquip iriure ex, ullamcorper vereor. Ille vindico quidne eros, velit typicus consequat, nulla typicus voco.<br />
        Facilisi bis dolore ne consectetuer pneum genitus torqueo consequat ut vulpes at, luptatum abdo uxor. Ludus torqueo consequat pala humo zelus et olim sino metuo nullus amet virtus facilisi. Nullus pagus jugis vel ad diam. Vel veniam, dignissim incassum, natu ad paulatim consequat antehabeo gemino nunc sino occuro valde tego. </p>
        <p>Exputo exerci consequat transverbero ne aliquip iriure ex, ullamcorper vereor. Ille vindico quidne eros, velit typicus consequat, nulla typicus voco.</p>
      </div>
    </div>
    <script>
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
    </script>
    </body>
    </html>

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2011 6:13 PM   in reply to onefiftymph

    Thank you for your feedback.

     

    In your case, I have a faint suspicion that the problem lies with sloppy markup. When I look at the first few lines of the body section of your document

    <body>
    <div id= "containerHeader">
    <div id= "containerHeaderLeft"><img src="images/logo-header_200x41.jpg" width="200" height="41" /></div>
    <div id= "containerHeaderRight"><img src="images/hdr-login-search_539x41.jpg" width="539" height="41" /></div>
    </div>

     

    <!--[if lt IE 7]><script type="text/javascript" src="iehoverfix.js"></script><![endif]-->

     

    <div class="colmask leftmenu">

     

      <div class="colleft">
        <div class="col1">
                <!-- Column 1 content start -->
                <span class="footer-smalltext">More information</span>
    <!-- Column 1 content end -->
    </div>
                  <!-- Column 2 start -->
        <div class="col2">
        <div class="container-breadcrumb"><a href="#">Home</a> > <a href="#">Members</a> > <a href="#">150mph</a></div>

    1. Athough this will work, I would put the script in the HEAD-section

    2. There is no </div> tag for the class colmask and leftmenu

    3. The > should be represented with and escape character as in &gt;

     

    I saw that further down there are a few more problems. Clear these up, especially closing tags, and see if it makes a difference.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2012 4:57 PM   in reply to onefiftymph

    Over a year later and this post is still helping!  the change in the JS of height to be auto did the trick for my problem.

     

    I appreciate it!  Thanks Gramps!

     
    |
    Mark as:

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