10 Replies Latest reply: Aug 11, 2008 12:36 PM by JS3der RSS

    Printing a Spry Accordion form

    Newsgroup_User Community Member
      I have used Spry Accordion to make a rather complex form work very well ..
      but now I have a problem. The client wants to be able to print out the form
      and I'm having trouble getting it to work. I have put a copy where it can
      be viewed but you can see when you do a print preview, only the Accordion
      tab that is open is displayed.

      Ideally, what I would like is for each tab to go to the next page and print
      them all. Any thoughts?

      http://www.linkerfinancial.com/printcopyform.asp

      Thanks!


      --
      Nancy Gill
      Adobe Community Expert
      Author: Dreamweaver 8 e-book for the DMX Zone
      Co-Author: Dreamweaver MX: Instant Troubleshooter (August, 2003)
      Technical Editor: DMX 2004: The Complete Reference, DMX 2004: A Beginner''s
      Guide, Mastering Macromedia Contribute
      Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP Web Development


        • 1. Re: Printing a Spry Accordion form
          kinblas Community Member
          Nancy and I have been talking off-line about this, but I thought I'd answer here for the benefit of others.

          If you want to print with all panels open, you have to disable any of the styles on the Accordion that hide overflow, use display:none, or set the heights. Something like this works for me when I print the Accordion sample page we have here:

          http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html

          I basically took that page, and added this:

          <style type="text/css" media="print">
          .Accordion {
          overflow: visible !important;
          }

          .AccordionPanelContent {
          display: block !important;
          overflow: visible !important;
          height: auto !important;
          }
          </style>

          The !important is necessary because the widget places inline styles on the panels that are not visible so you want to make sure that when printing, your print style properties trump the inline styles.

          --== Kin ==--
          • 2. Re: Printing a Spry Accordion form
            Newsgroup_User Community Member
            "kinblas" <webforumsuser@macromedia.com> wrote in message
            news:f1d7is$7ol$1@forums.macromedia.com...
            > Nancy and I have been talking off-line about this, but I thought I'd
            > answer
            > here for the benefit of others.
            >
            > If you want to print with all panels open, you have to disable any of the
            > styles on the Accordion that hide overflow, use display:none, or set the
            > heights. Something like this works for me when I print the Accordion
            > sample
            > page we have here:

            That's valuable information. Something worth integrating into the docs.

            Thanks

            Massimo


            • 3. Re: Printing a Spry Accordion form
              Newsgroup_User Community Member
              > That's valuable information. Something worth integrating into the docs.


              Definitely. When I get this all sorted, I had thought about contributing to
              CSS Advisor. I'm not there yet. I have a massive form with five accordion
              panels and while the rules stated above have gotten most of it to print,
              it's still dropping out content from the two panels in the middle. Not sure
              why .. when I have it all fixed, I'll report back.


              --
              Nancy Gill
              Adobe Community Expert
              Author: Dreamweaver 8 e-book for the DMX Zone
              Co-Author: Dreamweaver MX: Instant Troubleshooter (August, 2003)
              Technical Editor: DMX 2004: The Complete Reference, DMX 2004: A Beginner''s
              Guide, Mastering Macromedia Contribute
              Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP Web Development


              • 4. Re: Printing a Spry Accordion form
                Newsgroup_User Community Member
                It's all fixed .. for those who are curious and need a print style sheet
                with an Accordion, Thierry Koblentz got me all fixed up with this style
                sheet .. the bottom part is specific to the Accordion part to override the
                SpryAccordion.css rules:

                @charset "utf-8";
                /* CSS Document */
                body {
                color:#000;
                margin: 0;padding:0;
                background-color: #5B6D85;
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 12pt;
                }
                #content {
                margin-top: 10px;
                margin-right: 10px;
                margin-bottom: 10px;
                margin-left: 8px;
                }

                input, select {
                background-color: #F5F5F5;
                color: #666666;
                font: 12px Verdana, Arial, Helvetica, sans-serif;
                }

                fieldset {
                margin-top: 5px;
                margin-right: 2px;
                margin-bottom: 5px;
                margin-left: 2px;
                padding: 0;
                }
                label {
                font-size: 10px;
                font-weight: bold;
                margin-right: 5px;
                }

                .buttons {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 10px;
                background-color: #8887CD;
                color: #FFFFFF;
                margin-right: 6px;
                font-weight: bold;
                margin-left: 10px;
                border: solid #000 1px;
                }

                #footer,#logo,.AccordionPanelTab,#submit,a:link{display:none}

                div.AccordionPanelContent {
                height: auto !important;
                }
                div.Accordion {border:none}
                * {overflow:visible !important;height:auto !important}
                #header {overflow:hidden !important;}



                Nancy



                • 5. Re: Printing a Spry Accordion form
                  Mark.P.
                  I was searching to do the same thing but for tabs... I wanted to share that this answer solved it for me, here's how:

                  .TabbedPanelsContent {
                  display: block !important;
                  }

                  -Mark
                  • 6. Re: Printing a Spry Accordion form
                    dabidaoud
                    I was looking for something similar for the Collapsible Panel. This worked for me.

                    .CollapsiblePanel {
                    overflow: visible !important;
                    }
                    .CollapsiblePanelContent {
                    display: block !important;
                    overflow: visible !important;
                    height: auto !important;
                    }
                    • 7. Re: Printing a Spry Accordion form
                      dehelias Community Member
                      Would this information regarding printing of the accordion also apply to the tabbed panels widget? I need the hidden panels to linearize in their correct order for printing (via an external print CSS file).

                      Skip Keats
                      • 8. Re: Printing a Spry Accordion form
                        chester1229
                        Maybe someone can help me with an Accordion printing problem. I have the exact same code for my panels and it opens up the panels and you can print until the first page break (the printer goes to page 2) after that it is all blank.

                        How could a printer going to another page affect the javascript?
                        • 9. Re: Printing a Spry Accordion form
                          karonz Community Member
                          I am trying to print collapsible panel group, and the code submitted in this thread works, but it cuts it off after the first page.......
                          http://www.nmprc.state.nm.us/faqs.htm
                          any suggestions other than creating a printable page for each faq?
                          • 10. Re: Printing a Spry Accordion form
                            JS3der
                            I am also experiencing problems trying to print nested tables inside a SpryHTMLPanel across pages. As IE 6.0 and 7.0 and, IE 5.2 on the MAC, do not recognize the CSS declaration 'page-break-inside: avoid', I am left at the mercy of the browser to print what it can, but again wouldn't it be nice if Microsoft actually utilized, fully, the standards of CSS? Everything prints, its just that it gets cut off on the bottom of the page (HTMLPanel) and then continues at the top where it broke, but then places a break a little further down. It has nothing to do with page margins as the area where it places the break is after my page margin and a half line of content inside the HTML panel. I have tried placing overflow:visible and height:auto, on my TR, TD, and TH and on the HTMLPanel itself to no avail.