I am trying to create a printable document using CSS in my angular project.
For my print document that runs into multiple pages I need automatically to avoid printing the date and title in the header. At the same time I want to make sure that the document is printed with some margins. To achieve this I am using the approach suggested in this answer on SO. However I am not able to get the styling to apply.
My CSS Code looks like this
#media print {
#page {
size: auto;
margin: 0;
}
body {
margin: 2cm !important;
}
}
I have tried pasting this code in both the app.component.scss file as well as the styles.scss file. Both approaches don't seem to work. Any suggestions?
You need to put the following css in your styles.css file
#media print {
#page {
size: auto;
margin: 0mm; // added mm
}
body {
margin: 2cm;
}
}
And if you need component specific styling, you can add that to your component's css file as well:
#media print {
section {
color: orange;
}
}
Here is a Stackblitz example.
You can also try to print this page (https://angular-j4ab2g.stackblitz.io), and you will see that the date from the header is gone, and my custom section has orange text.
EDIT
I think the best option to remove the footer and header is to un-check the box in the print settings
Then you do not need to add the 0mm margin to the #page selector and the 2cm margin on the body selector.
Related
I have a website and want to generate a pdf with the print function. I need to add a footer on all pages.
Only the first page should be without the footer. I already tried the display property which doesn`t work. Do you know a solution?
This is how the footer is set:
.page-footer {
position: fixed;
bottom: 0;
}
// HTML
<footer class="page-footer">
Text for footer
</footer>```
Add another class to home page footer and hide it on print CSS. Along with page-footer class add another class home-page-footer and hide it when printing.
.home-page-footer { display: none; }
You will have to create separate print.css and set css rule for print media
print.css
#page {
/* rules as per your requirement */
size: 190mm 130mm;
margin: 0;
margin-top:10mm;
}
#media print {
.home-page-footer { display: none; }
}
You don't need to set rule for .home-page-footer class in your normal css file. or condition.
I'm trying to print a modal dialog in a React component. When the component that is under the modal takes up more than 1 page, the printing of the modal is duplicated for each page.
Since the div that I want to print is overlayed on other divs, I am using style-components library to set the #media print properties to only show the print target. In the page, I have the following:
const NoPrintBody = createGlobalStyle`
#media print {
html, body {
visibility: hidden;
}
}
`;
and the render contains the <NoPrintBody /> element.
Then, in the modal, I have:
const ReportContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
#media print {
visibility: visible;
}
`;
and here the modal is surrounded by the <ReportContainer> element. I've tried to set the height of the underlying content to 0px, but that did not have any affect.
Is your global style getting updated correctly? You should be able to find that css somewhere on the page.
I don't think NoPrintBody will work since it is targeting the html tag - even your modal should be a child of that.
Have you tried it without #media print ? If you can get it to look how you want it to in the browser you should be able to add it back to get it to print how you want
I got this same issue in a vue.js app.
I think the problem is because an SPA like its name say's is just a single page application. So as long as there is a component with content that can't be contained in a single page the print function will include those pages even if you aren't trying to print that component.
I fixed it by adding this to my global css file.
#media print {
html, body {
height:100%;
overflow: hidden;
}
}
This should force the print function to only pick one page.
I created an application using Vue.JS and Vuetify. The layout is based on the Google Contacts layout. I am using both a toolbar and a navigation drawer.
I would like to be able to print the content from the browser without printing the toolbar and nav drawer. I created the following CSS class:
#media print {
.no-print {
display: none;
}
}
I applied this class to the toolbar and nav drawer. When I try to print the page, these elements don't show up in the print preview, which is good, but the content does not stretch to the entire page. Looks like the toolbar and nav drawer space is still reserved for these elements.
How can I remove this space reservation?
Space is reserved with padding on v-content, so you'll have to add
.v-content {
padding: 0 !important;
}
to your media query.
Elaborating on Kael's answer, I added this to my my main App.vue compononent:
<style scoped>
#media print{
.v-content {
padding: 0 !important;
}
}
</style>
The following did the trick for me on the layout page.
#media print {
.v-main {
padding: 0 !important;
}
}
I am using a child theme (of twentyfourteen) and am trying to remove the padding of a particular element. The code in-question appears as such in the parent style.css:
#media screen and (min-width: 846px) {
.content-area,
.content-sidebar {
padding-top: 72px;
}
}
When modify the padding to 0px thusly:
#media screen and (min-width: 846px) {
.content-area,
.content-sidebar {
padding-top: 0px;
}
}
and insert at the end of the PARENT style.css, I achieve my desired results (padding changes to 0px). However when I insert the identical code at the end of the CHILD style.css, it does nothing (the padding remains at 72px). Anyone know why this happening?
CSS rules are parsed in order, with the rules at the end taking precedence over the rules at the beginning. In other words, if the same selector appears twice (even in different files), the second copy will overwrite the first. If your custom CSS is loaded before the theme's CSS, the theme CSS will take precedence. You can see this happening if you use the inspector (F12 in Chrome) to see which copy of the selector the browser is actually referencing.
CSS also respects specificity moreso than order, so you can also try making your selector more specific than the theme's. For example, imagine .content-area and .content-sidebar are inside a wrapper called .content-wrapper. If you do something like this, it will override the original selector:
.content-wrapper .content-area,
.content-wrapper .content-sidebar {
padding-top: 0px;
}
I am looking for a way to use the same stylesheet for print media as for the default onscreen layout. The advantage to me will be that I won't have to update 2 files every time I update the CSS. I would prefer to have one stylesheet and specify special rules for print media by denoting them somehow… It may not be possible, but I thought I'd put the question out there.
If you want the styles to be the same across all media, just define the common styles in the stylesheet as normal (i.e. not in any media rule) then put the media specific elements in the relevant rules.
If you want some styles to apply to a subset of media, you can do it like this:
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 13px }
}
#media screen, print {
body { line-height: 1.2 }
}
Here's a link to the relevant W3C page
There's this syntax, although I honestly don't know if it's supported across all browsers (it should be):
#media print {
body {
background: #fff;
color: #000;
}
/* etc */
}
See the media part of the CSS2 standard at W3.
I had this exact same issue wanting to use the #media print tags without the need for a seperate print.css file. my question is here.
How to extract #media print from main.css file without need for seperate print.css file
You can achieve this by pointing your style link for media printing to the same css file you have your main layout in and adding #media print tags to it. I am not sure though if this is best practice.
<link href="css/main.min.css" media="screen" rel="stylesheet" />
<link href="css/main.min.css" media="print" rel="stylesheet" />
Now when I can have #media tags for print styling within the main css file. like below
.ContainerHeader {
align-items: center;
display: flex;
background-image: url(/images/header.png);
background-size: 100% 100%;
grid-area: ContainerHeader;
width: 100%;
height: 100%;
z-index: 99;
#media print {
.ContainerHeader{
display:none !important;
}
}
}