Margin on top of printed page

[404sand808s]

First and foremost thank you very much for this repo, it's by far the easiest React printer to use/implement that I've tested.

I had one question though: when I print the same component multiple times (i.e. the same component several times within a div, and the ref is to the div), there is a small 8px margin on top of only the first printed component (each is printing to a different page by the way).

I read that setting the @media print body margin-top to 0 would fix it but so far that hasn't changed anything. (link: https://stackoverflow.com/questions/5024393/page-margins-for-printing-in-css).

Any suggestions?

[gregnb]

Thanks for the feedback! I'm not entirely sure about the issue can you provide a codesandbox to this example? I'll look into it

[404sand808s]

Sure, I'm not sure it's even necessarily related to my implementation or even react-to-print. But here it is:

      <ReactToPrint
          trigger={() => <a href="#">Print this out!</a>}
          content={() => this.componentRef}
      />
      <div ref={el => (this.componentRef = el)}>
        <Label pre={this.props.pre} />
      </div>

It's pretty simple. The label itself is a simple component that doesn't have any special margins. Actually, what I've tested is putting multiple components within the targeted div and it prints them each out on a separate page perfectly. Only the first has a top margin of 8px I believe, the following ones don't. Thanks!

[gregnb]

Ok I'll try to look into this. Thanks!

[ShawnKoga]

@gregnb The repo seems to be working fairly well for me, but I have a component that gets split to multiple pages when I go to print. I am having an issue with the margins on the pages, when printed, cut off some information. Is there a way to account for this in my code to make sure everything is printed correctly? I think the sides can be accounted for easily enough by adding padding, but the repo seems to automatically split the component into multiple pages, so with no real way to know where the page breaks will be is there a way to account for the top and bottom dead space?

[BrittMcDanel]

I am having the same issue as ShawnKoga, components will split in an ugly way over multiple pages. Is there a way to determine a page break. Even manually setting one would be good. Something like:

<Content>
   <div>Page one</div>
   <PageBreak />
   <div>Page two</div>
   <PageBreak />
   <div>Page three</div>
<Content>

I realize this is probably hard to do. Overall react-to-print is very good and is working well for me also.

[simonschllng]

One can control page breaks with CSS: https://www.w3schools.com/cssref/pr_print_pageba.asp

[BrittMcDanel]

Thanks simon I was not aware of this.