Develop Reference

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;
}

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

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:

Hide Vertical Scrollbar in Chrome while printing

How can I remove the scrollbar while I print report in Chrome Browser.
Here is my code:
<style>
#media print {
#page {
size: A4 portrait;
margin:1cm;
}
</style>
Here is the picture:

This is the solution I found:
#media print{
#page {
size: A4 portrait;
margin:1cm;
}
::-webkit-scrollbar {
display: none;
}
}

overflow: hidden is the css property you are looking for. It removes the scrollbar and removes overflowing content. See: https://developer.mozilla.org/en/docs/Web/CSS/overflow
<style>
#media print{
#page {
size: A4 portrait;
margin:1cm;
overflow: hidden;
}
}
</style>
Or try to set the overflow hidden without depending on the media query:
html { overflow: hidden; }
If this does not help for printing, maybe have a look at the answer of following question: How to hide the scroll bar and with the content ramaining scrollable?
As mentioned there you could try to set the width of the scrollbar to zero for webkit browsers.

Responsive Nav Javascript

I am trying to make a responsive nav. I am using some jquery but I don't know javascript very well. I would like the toggle to take place when the window is a certain width (e.g. 1050px) this is the script
function adaptMenu() {
/* toggle menu on resize */
$('nav').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ($(this).parent().width() < $width * 1.05) {
$(this).children('.nav-main-list').hide(0);
$(this).children('.nav-toggled').show(0);
} else {
$(this).children('.nav-main-list').show(0);
$(this).children('.nav-toggled').hide(0);
}
});
}

You can solve this by fixing the given javascript, but javascript is inefficient to handle responsive design. CSS engine is written in c++ and works faster, and automatically when browser is resized.
Better use CSS media query
The following snippet does the same as your javascript but with pure CSS.
<style>
#media (max-width: 1049px) {
nav .nav-main-list {
display: none; /* hide .nav-main-list when browser windows width < 1050px */
}
nav .nav-toggle {
display: initial; /* show */
}
}
#media (min-width: 1050px) {
nav .nav-main-list {
display: initial; /* show .nav-main-list when browser windows width > 1050px */
}
nav .nav-toggle {
display: none; /* hide */
}
}
</style>
EDIT:
As #Roko commented, media query does not work in IE8 and earlier. If you need support that browser, this post may help.

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 */
}