using Vuetify, when i try to print a page it only shows the first one

Question

I have an app built using Vuetify.

One of the pages is used for orders and I want the user to be able to print it.

The problem is that if I have scroll in the page, only the first page shows with a scrollbar:

How can I make it display all other pages for print?

UPDATE

I have a .scroll-y class on the main section, if I use this css for print:

 @media print{
      body,
      html {
        height: 5000px !important;
      }

      .scroll-y {
        height: 100% !important;
      }
    }

it works, but obviously i don't want a set height of 5000px for every print, I can use js to calculate the height and set it but I'm wondering if there is a better/easier way?

Answer 1

You have to change CSS, adding something like this:

@media print {
  body { 
    overflow: auto;
    height: auto; 
  }
  .scroll-y {
     height: auto;
     overflow: visible;
  }
}

So .scroll-y occupied all space needed, and body will grow up to right printed size. Of course you must adds html elements for printing page break, preview print of your view on typical print size (i.e. A4) and adding where need an breakup print element as

 <div class="print-break-page"></div>

with css:

 .print-break-page {
       page-break-after: always;
 }