Let user define margin about react-to-print HOT 17 CLOSED

I got the solution for this,

As I was using React, so made a function to get the page margins and called the same inside style tag in the JSX, and it worked,

const getPageMargins = () => {
  return `@page { margin: ${marginTop} ${marginRight} ${marginBottom} ${marginLeft} !important; }`;
};

<style>{getPageMargins()}</style>

Hope it helps!

from react-to-print.

For me this is more a hack than a solution. The browser adds those headings and should give the user a way to remove them. My browser (google chrome 67) offers this option:

Could you at least make this optional? Like if you set property pageStyle="@page { size: auto; margin: 25mm; } }" it gets overwritten, if not it takes the current default?

from react-to-print.

I've taken care of this issue by adding a prop called pageStyle which you can then override everything and provide whatever styles you wish.

If you want nothing to be there simply:

 <ReactToPrint
    pageStyle={""}
 />

from react-to-print.

@MatthewHerbst all not working! can you help me!

from react-to-print.

@nikhils4 thanks for sharing! If you'd like, feel free to make a PR to add that to the CSS tricks section of the README! I'm happy to do that too if you'd like, but would love for you to take the git credit 😄

from react-to-print.

Yeah sure @MatthewHerbst, would be glad to do that 💯

Done, #394

from react-to-print.

As you might notice margin 0 removes the date/time from top.
https://github.com/gregnb/react-to-print/blob/725e060ed02a6077420f5be2897990b60f9ee46a/src/index.js#L160
Need an another solution.

from react-to-print.

@simonschllng Sorry for the delayed response. So you're proposing two different solutions:

1. Adding a prop called 'pageStyle' where a user can specify styles for the page itself
2. A prop to turn the default pageStyle off/on

If you want to submit a PR for solution 1 I would accept it. That way you can style it however you see fit. As pointed out it was added to remove the time, but I would be willing to allow users to override if it they really want to

from react-to-print.

First option is more appropriate.

from react-to-print.

Anyone want to take this work on up on the first option?

from react-to-print.

pageStyle not working! I want custom margin top, bottom.

pageStyles={'@media print { body { -webkit-print-color-adjust: exact; } @page { size: A4; margin: 200mm !important }}'}

from react-to-print.

@NguyenTheSon does it not work in general, or does it just not work with media/other queries?

from react-to-print.

@gregnb Any concrete solution, on how one can give page margins using @page CSS rule, while using react-to-print?

from react-to-print.

Hii ,

I got the solution for this,

As I was using React, so made a function to get the page margins and called the same inside style tag in the JSX, and it worked,

const getPageMargins = () => {
  return `@page { margin: ${marginTop} ${marginRight} ${marginBottom} ${marginLeft} !important; }`;
};

<style>{getPageMargins()}</style>

Hope it helps!

Hi @nikhils4 can't we add a margin to the specific page only? As the above function added margin to all pages.

from react-to-print.

@15tanvir you'd have to make a class to apply it to and have that class only wrap content on the first page

from react-to-print.

from react-to-print.

If you look at the docs, I think you want something like:

@page :first {
  /* Applies styles to the first page only */
}

from react-to-print.