React - window.print() is clipping the elements on the last page - javascript

I'm trying to print PDF using window.print() in my React component on a button click. Project uses MaterialUI as visual component library.
Each page has 4 things on it: h1, h3, <graph />, <DataTable />. First two pages print as expected, but the last page only shows h1 and h3 and is clipping graph and DataTable. If I change paper size from Letter/A4 to A1, all elements get displayed, although everything is on 1 page only.
I've a pagebreak element with page-break-before and page-break-after as page. Style has following:
<style>
{`
.pagebreak {
page-break-before: page;
break-before: page;
page-break-after: page;
break-after: page;
clear: both;
}
.pagebreak + * {
page-break-inside: avoid;
}
#media print {
#customized-title, #btn-container {
display: none;
}
}
* {
float: none !important;
}
#print-reg {
max-width: 1000px;
}
#print-reg * {
overflow: visible !important;
}
`}
</style>
Components on the screen are rendered properly, but in print this behavior occurs where the last page is missing graph and DataTable elements. Same result when print using the button click or Ctrl+P.
What am I doing wrong?
Here is what output looks like:

Related

Why is chrome's print preview and printed view is different ? [HTML - CSS]

I have a demo angular project which has basic text and table inside as below.There is print button which is calling window.print() to make the page printed with applied styling.
printPage() {
window.print();
}
css:
#media print {
#page {
size: landscape;
margin: 0;
}
}
My demo project link:
https://stackblitz.com/edit/angular-qxlcna?file=src/print/print.component.ts
My aim is being able to print this table landscaped exactly how it seems on the web page without any crops.^
After print button clicked preview on chrome's print dialog looks great as below
Unfortunately after print, result is not as expected.As you can see there are crops from left and right sides of the paper.Although my other attempts to set margin:0 padding:0 stylings didn't work.How can I print exactly as same as what I'm seeing on HTML page?
I tried also this kind of styling
#media print {
* {
margin: 0 !important;
padding: 0 !important;
}
html,
body {
height: 100%;
overflow: visible;
}
}
I've checked your example and it's a problem related with the printer. Some printers have a "non-printable margin" by default so there is no way to print on the edges.
The user could be change manually if there are some options for scaling the document but it would be a bad solution.
My solution would be adding some margins in the CSS for the print media. For example, in this case, I 've added a left and right margin and everything it's printed correctly.
.designed__table {
width: 100%;
td,
th {
padding: 5px;
border: 1px solid;
}
}
#media print {
#page {
size: landscape;
margin: 0px 10px;
}
}
.print-container {
position: absolute;
}

How i removed blank space in html page while printing?

I have a page where I print this page content. My problem is when the page is load a print dialogue box appears and there is empty white space at the bottom. How do I remove this blank space? I tried to give min-height:100vh to body but it is not working . Please also check print css
#page {
/* size: auto; auto is the initial value */
margin: 3.5mm;
}
#media print{
table { page-break-inside:auto; }
tr { page-break-inside:avoid; page-break-after:auto; }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }
}
You have to change and check the following style values based on your content length & width.
#page { size: 100mm 50mm } /* output size */
body.receipt .sheet { width: 58mm; height: 50mm } /* sheet size */
#media print { body.receipt { width: 58mm } } /* fix for Chrome */

Printing only contents in dotmatrix Printer

We have been working on a project where the contents in the html page needs to be printed in the dot matrix printer using a JavaScript print function. The issue we are facing is that there is blank space after the contents are printed.
The page settings is A4 / Legal as there cannot be a definite height since the height of the contents printed may vary.
We have tried using the following CSS:
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
##media all {
.page-break {
visibility: hidden;
}
}
##media print {
body * {
display: none;
height: 0;
}
}
You can try adding space between ## and media like so ## media. There is a bug like that with .NET Razor.
You could also use #page to manipulate margins, size and page breaks.
MDN: The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
Or you can also try this
<style type="text/css">
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
</style>
<style type="text/css" media="all">
.page-break {
visibility: hidden;
}
</style>
<style type="text/css" media="print">
body * {
display: none;
height: 0;
}
</style>

Applying display:none in mobile/tablet view in html/css

I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.
In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.
I have feeling that I am using display: inline-block !important which is overriding display:none from the html
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
I am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.
Just add this jquery for all the sections
$(window).resize(function(){
if ($(window).width() <= 767) {
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add this condition for all sections
}
});
And remove this css :
#media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label {
display: inline-block !important;
}
}
You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.
You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style
eg.
#media only screen and (max-width: 767px) {
div.active-category {
display: inline-block;
}
div.default-category {
display: none;
}
}
Just add jquery as below:
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add for all items
Try if it works.
Hope this is what you want.

Possible to force printer setup (paper size) in javascript?

I have a need to print pages from a web app on to 8" x 4" index cards. IE doesn't save print settings from one print to the next, so is there a way to programmatically force the print set up?
Look at this CSS3 examples from http://www.w3.org/TR/css3-page/#size:
/* style sheet for "A4" printing */
#media print and (width: 21cm) and (height: 29.7cm) {
#page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
#media print and (width: 8.5in) and (height: 11in) {
#page {
margin: 1in;
}
}
/* A4 Landscape*/
#page {
size: A4 landscape;
margin: 10%;
}
You can do this in CSS using the #media print directive, no js required. You'll have to calculate what sizes relate to a 4x8 index card and do all the positioning yourself, but it will work. Also, since this is CSS2 it won't work in IE6. (see Joel's comments)
#media print {
body {
width: /*width of index card*/
height: /*height of index card*/
}
/* etc */
}

Categories

Resources