5 Replies Latest reply: Jun 11, 2012 4:57 PM by TheBitBug RSS

    Spry collapsible wont expand down

    onefiftymph Community Member

      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

        • 1. Re: Spry collapsible wont expand down
          Ben Pleysier CommunityMVP

          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

          • 2. Re: Spry collapsible wont expand down
            onefiftymph Community Member

            Thanks so much Gramps! I did read through some of your enjoyable answers before my first post here. "..provide a link to your site so that we can all marvel at the phenomenon."   LOL!!

             

            Your fix to the .js file and html changes are perfect. Thanks for taking the time to help me.

             

            I also appreciate that in your reply you noted of my example "in this illustration", because that was my attempt to re-create in a simpler version my main dilemma, where I'm trying unsuccessfully to finesse the problem on a new, fluid two-column page design for my hiking site (before hiring someone much smarter than me to fix):

             

            http://96.0.181.107/stylingproblem/user01.html

             

            Before finding this forum I spent an entire day reading and searching and going line-by-line, comments galore, trying height: 0, height: auto, height 160px; and more, experimenting with every CSS property to figure out why the collapsible panel - with several nested div's - on this page won't behave. (With the browser open to 12" or more, it looks almost right, but breaks on resize)

             

            Here's what that page looks like after the change to line 431 of the .js file:

             

            http://96.0.181.107/spryprob02/user01.html

             

            Still a problem. Im sure I've got something else dramatically wrong and maybe my earlier example wasn't indicative of the problem here. I gave .CollapsiblePanelContent a green background to see what's happening.

             

            Would very much appreciate taking a look and setting me in the right direction.

            • 3. Re: Spry collapsible wont expand down
              Ben Pleysier CommunityMVP

              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

              • 4. Re: Spry collapsible wont expand down
                onefiftymph Community Member

                Thanks Gramps

                 

                I made the changes and corrections you pointed out, went through with the page again and changed some things like removing blank lines and taking most comments off their own line. Then I tried the W3 schools validator but it wasn't finding opening and closing tags and other things that are actually there, so not much help.

                 

                Right now the CollapsiblePanelContent has height:222px - the only way i can get it to stay open.

                 

                I re-uploaded everything: http://96.0.181.107/spryprob02/user01.html

                 

                If you have any further advice to offer, I can't tell you how much I appreciate the effort! At 20+ hours into this page, it's looking like I'll have to start from scratch...sigh...maybe I'll get to this same place a lot faster the 2nd time!

                • 5. Re: Spry collapsible wont expand down
                  TheBitBug Community Member

                  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!