paper-css icon indicating copy to clipboard operation
paper-css copied to clipboard

Is it possible to have it automatically create new pages once the sheet overflows?

Open jedallado opened this issue 7 years ago • 9 comments

Currently you'll have to define "sheet" for each page, but I am looping long list of data so I only created one sheet. The problem is after the end of the sheet the rest of the data gets hidden and not printed.

jedallado avatar May 26 '17 04:05 jedallado

Hi @bionets. paper-css is just a set of CSS, so we need to do pagination manually.

cognitom avatar May 26 '17 04:05 cognitom

Hi @bionets... I know this is old, but I was able to do this pretty easily by just adding a style:

.sheet {
  overflow: visible;
  height: auto !important;
}

I was also able to avoid the browser printing half an element on one page and the other half on the next by adding page-break-inside: avoid; to the repeating items I had, in my case it was a simple div.

JulienMelissas avatar Nov 30 '17 05:11 JulienMelissas

page-break-inside: avoid;

Hi, how you avoid the next page enters with no padding on top ? i try your solution but when content is too big, the next page is close to the border top of the page.

danilockthar avatar May 11 '21 17:05 danilockthar

page-break-inside: avoid;

Hi, how you avoid the next page enters with no padding on top ? i try your solution but when content is too big, the next page is close to the border top of the page.

Same issue +1

lpwm avatar Jun 26 '21 09:06 lpwm

@lpwm @danilockthar try adding:

@page {
   size: A4;
   margin: 15mm 15mm 15mm 15mm;
}

TriPSs avatar Jun 27 '21 12:06 TriPSs

@lpwm @danilockthar try adding:

@page {
   size: A4;
   margin: 15mm 15mm 15mm 15mm;
}

Finally found the issue was caused by a div with growing height and ignored the paddings.

lpwm avatar Jun 27 '21 12:06 lpwm

page-break-inside: avoid;

Hi, how you avoid the next page enters with no padding on top ? i try your solution but when content is too big, the next page is close to the border top of the page.

Same issue +1

@lpwm @danilockthar try adding:

@page {
   size: A4;
   margin: 15mm 15mm 15mm 15mm;
}

I tried this and didn't work. Is there a sample code that contains the full CSS and page content that goes across multiple pages? Thanks!

franky1017 avatar Mar 04 '22 00:03 franky1017

I solved it

@page {
            size: A4;
            margin: 5mm 0mm ;
        }
.sheet {
            overflow: visible;
            height: auto !important;
        }

fgonga avatar Jul 07 '22 10:07 fgonga

@cognitom When looping through data, is there any way we can know when a page is full? and then start/open a new sheet.

zerdotre avatar Feb 13 '23 07:02 zerdotre