Announcement

Collapse
No announcement yet.

Printable Invoice Page Breaks

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Printable Invoice Page Breaks

    When we print an entire batch of 'printable invoices' the page breaks are difficult.
    If a second page is needed it prints at the top of the next order without starting a new page for the next order. It will right itself again if there is a short order and start new with the next - so there is some page break - but not as needed.
    Please let me know how/where I can make this start a new page for each new order - even if just 1 line on page 2 (or 3 or).
    Thanks, David
    SunOrganic Farm
    Tags: None
    #2
    There are CSS style properties named page-break-before and page-break after. If you do a Web search for "HTML page break," you should get some helpful info.
    Kent Multer
    Magic Metal Productions
    http://TheMagicM.com
    * Web developer/designer
    * E-commerce and Miva
    * Author, The Official Miva Web Scripting Book -- available on-line:
    http://www.amazon.com/exec/obidos/IS...icmetalproducA

    Comment

      #3
      sometimes its as simple as switching browsers to print. IE/Edge are notorious for not supporting HTML page breaks properly. Firefox is generally the best at handling it, chrome depends on day of the week it is :)
      Bruce Golub
      Phosphor Media - "Your Success is our Business"

      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
      phosphormedia.com

      Comment

        #4
        Thank you both. Apparently I'm going to need more hand holding.
        I have tried many (15?) additions to the code at User Interface - Printable Invoice.
        Such as -
        <div style="break-after:page"></div>
        And the 'before' versions at many places at the start and end of the code.
        I have been using IEEdge but tried a different computer with FireFox with same result....nothing.
        Somewhere along the line I did get it to break at the correct point but it also printed an additional blank page between each order.
        The start of my Printable (template) code is;
        ...............interesting - it won't let me cut and paste it here 403 error - Forbidden
        It starts
        <!DOCTYPE html.........
        then
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        must I go on.

        The code ends with.....
        </mvt:foreach>
        </mvt:if>
        </div>
        </div>
        <!--<div class="customer_notes">
        <h2>Customer Notes</h2>
        <hr />
        <mvt:item name="customfields" param="Read_Order( l.settings:order:id, 'order_notes', g.order_notes )" />
        &mvte:global:order_notes;
        </div>-->
        </div>
        </mvt:foreach>
        </body>
        </html>
        It let me cut and paste that!

        With this info can you help me with what code to put where?
        Sorry this is so sloppy!

        Comment

          #5
          Hey Talerco,
          Apply the styles below to your container element -- if there isn't one, make one. Meaning wrap your order details etc. in a container.

          styles:
          page-break-after: always;
          page-break-inside: avoid;

          Example:
          <div style="page-break-after:always; page-break-inside: avoid;">
          <!-- the rest of your template code goes in here -->
          </div>

          More specifically:
          <mvt:foreach iterator="order" array="admin_order:orders">
          <div style="page-break-after:always; page-break-inside: avoid;">
          <!-- the rest of your template code goes in here -->
          </div>
          </mvt:foreach>

          If you were to generate a new template based batch report for orders, you'd notice that Miva's default template wraps all of the order details with "<div class="order">". They then apply the following styles to the class "order":
          .order {
          text-align: left;
          width: 690px;
          padding: 20px;
          page-break-after: always;
          }

          I've tested printing batch reports for very large orders without issue in Chrome, Firefox & Edge.
          Hope this helps!
          -Ryan


          Comment

            #6
            Ryan, isn't this similar to the

            <div style="break-after:page">&nbsp; </div>

            hack?
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment

              #7
              Originally posted by Bruce - PhosphorMedia View Post
              Ryan, isn't this similar to the

              <div style="break-after:page">&nbsp; </div>

              hack?
              No. That method will not work in all browsers (specifically IE), which is likely what he was using.

              Comment

                #8
                We had implemented the page break, and now we find lots of wasted paper trying to get pages to fit. For example, an order may be one page but the break actually pushes it to a second page and we get literally a blank page. Anyone else having this issue?

                Comment

                Previous template Next
                Working...
                X