Page print preview and printing

e4hats · August 19, 2019, 4:55pm

Hi,

Version: 1.x

I cannot screen print (hard copy) for all pages. The only thing I can see is dark green background. It covers all page. Contents and images are all gone but dark green background. I have tested IE, FF, Chrome.

Please see video.

Thank you,
David

Graziel · August 20, 2019, 4:31pm

print is usually controlled by css with media queries print so check all your csses for it

https://www.w3schools.com/css/css3_mediaqueries.asp

e4hats · August 21, 2019, 4:12pm

Hi,
Followings are css we are using. I commented each line but no luck.

 div.index_wrapper {
    float:left;
    width:1650px;
 }
 
 .stock_flag_box {
    width:100%;
    border:1px solid;
    font-size:10pt;
/*	position:relative;
    margin-left:-200px; // half of width
    margin-top:-75px;  // half of height */
}

.oos_action form {
	margin-top:3px;
	margin-bottom:3px;
	font-size: 13px;
}

/* note: deprecated */
.sku_info tr td {
	font-weight:regular;
	font-size:16;
}

/* This is the body of the web page without the navi bars */
div.view_content {
	width:95%;	/* size within the view_content div class*/
    /* height:auto; */
	padding:10px 2%;
    float:left;
}

div.order_search_box {
	/*width:45%;*/	/* size within the view_content div class*/
    float:left;
}

div.product_search_box {
	/*width:53%;*/	/* size within the view_content div class*/
    float:left;
}

div.search_result {
    /*clear:both;*/
	float:left;
	width:1250px;
	padding:0px 0px 0px 40px;
}
div.sync_result {
	float:left;
	width:700px;	/* width 900 - margin 200 = 700px*/
	margin-left:200px;	/* because we want the sync result to be directly underneath the form */
	border-left:1px solid #666;
	padding:0px 0px 0px 40px;
}
div.report_result {
	/*float:left;*/
	width:700px;	/* width 900 - margin 200 = 700px*/
	margin-left:200px;	/* because we want the sync result to be directly underneath the form */
	border-left:1px solid #666;
	padding:0px 0px 0px 40px;
}

div.email_index {
	float:left;
	width:800px;
	height:auto;
	/* border-left:1px solid #666; */
	padding:5px 2%;
}

div.email_block {
    float:left;
    width:120%;
    clear:both;
    margin-top:20px;
}

table.boxed, table.boxed td {
	border: 1px;
}

table.order_status  tr td{
    width:auto;
    float:left;
    background:none;
    padding:none;
    border-bottom:none;    
}

div.index_row {
    float:left;
    clear:both;
    width:600px;
}

div.file_list {
    clear:both;
	float:left;
	width:1100px;
	padding:10px 40px 0px 40px;
}

div.po_list {
/*    clear:both;*/
	float:left;
	width:1250px;
	padding:10px 40px 0px 40px;
}
.body {
    clear:both;
	float:left;
	width:1100px;
	padding:10px 40px 0px 40px;
}
.image_row {
    height:110px;
}


/* For order and product search result */
th.result_row1 {
    width:auto;
    font-size:10pt;
	border:0;
	border-bottom:1px solid #555;
	text-align: left;
}
td.result_row1 {
    width:auto;
    font-size:11pt;
	border:0;
	text-align: left;
}

/* For vendor listing */
table.vendors {
    width:auto;
	background: #fff;
	text-align: r;
	vertical-align: top;
	border-bottom:1px solid #ddd;
}
table.vendors tr{
    /*font-size:16pt;*/
}

/* For purchase order item listing */
table.po_items {
    font-size:10pt;
    width:auto; /* po_list has 100%, so make it fit inside*/
    /* text-align:left; */
}

ul.email_list {
    
    /*list-style:none;*/        
}

/* Not sure what the following fout classes are for */
/* this is for span tag */
.highlight {
    background-color: #FFFF00;
}

.collapsibleList li{
  list-style-image:url('button.png');
  cursor:auto;
}

li.collapsibleListOpen{
  list-style-image:url('button-open.png');
  cursor:pointer;
}

li.collapsibleListClosed{
  list-style-image:url('button-closed.png');
  cursor:pointer;
}

/* For purchase order fax */
/* --> NOTE: only in-line styling seems to work */

/**
 * END of My custom classes
 **/

* {
	margin:0;
	padding:0;
}

/** General Style Info **/
body {
	background: #003d4c;
	color: #fff;
	font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
	font-size:90%;
	margin: 0;
}
a {
	color: #003d4c;
	text-decoration: underline;
	font-weight: bold;
}
a:hover {
	color: #367889;
	text-decoration:none;
}
a img {
	border:none;
}
h1, h2, h3, h4 {
	font-weight: normal;
	margin-bottom:0.5em;
}
h1 {
	background:#fff;
	color: #003d4c;
	font-size: 100%;
}
h2 {
	background:#fff;
	color: #e32;
	font-family:'Gill Sans','lucida grande', helvetica, arial, sans-serif;
	font-size: 190%;
}
h3 {
	/*color: #993;*/
	font-family:'Gill Sans','lucida grande', helvetica, arial, sans-serif;
	font-size: 165%;
}
h4 {
	/*color: #993;*/
	font-weight: normal;
}
ul, li {
	margin: 0 12px;
}

/** Layout **/
#container {
	text-align: left;
}

#header{
	padding: 0px 20px;
}
/* #header h1 {
	line-height:40px;
	background: #003d4c url('../img/e4hats_logo.gif') no-repeat left;
	color: #fff;
	padding: 0px 110px;
} */
#header h1 {
	line-height:20px;	/* header height */
	background: #003d4c;
	color: #fff;
}
#header h1 a {
	color: #fff;
	background: #003d4c;
	font-weight: normal;
	text-decoration: none;
}
#header h1 a:hover {
	color: #fff;
	background: #003d4c;
	text-decoration: underline;
}
#content{
	background: #fff;
	clear: both;
	color: #333;
	/* padding: 10px 20px 40px 20px; */
	padding: 0px 20px 40px 0px;
	overflow: auto;
	height: auto;
}
#footer {
	clear: both;
	padding: 6px 10px;
	text-align: right;
}


/** containers **/
div.form,
div.index,
div.view {
	float:left;
	width:700px;
	height:auto;
	/* border-left:1px solid #666; */
	padding:5px 2%;
	/*margin-left:180px;*/
}
/* div.view {
	float:right;
	width:76%;
	border-left:1px solid #666;
	padding:10px 2%;
}
div.actions {
	float:left;
	width:16%;
	padding:10px 1.5%;
} */
div.actions {
	float:left;
	width: auto;
	/* height:220px; */
    height:auto;
	padding:10px 1.5%;
    border-right:1px solid #666;
}
div.actions h3 {
	padding-top:0;
	color:#777;
}
div.actions_top {
	float:top;
	width:90%;
	padding:10px 1.5%;
}
div.actions_top h3 {
	padding-top:0;
	color:#777;
}



/**  Actions  **/

input.po {
	width:15%;
}

div.actions ul {
	margin: 0;
	padding: 0;
}
div.actions li {
	margin:0 0 0.5em 0;
	list-style-type: none;
	white-space: nowrap;
	padding: 0;
}
div.actions ul li a {
	font-weight: normal;
	display: block;
	clear: both;
}
div.actions ul li a:hover {
	text-decoration: underline;
}
table.po_items .actions a {
	font-size: 11px;
}
input[type=submit],
div.actions ul li a,
td.actions a {
	font-weight:normal;
	padding: 4px 8px;
	background:#e6e49f;
	background: -webkit-gradient(linear, left top, left bottom, from(#f1f1d4), to(#e6e49f));
	background-image: -moz-linear-gradient(top, #f1f1d4, #e6e49f);
	color:#333;
	border:1px solid #aaac62;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	text-decoration:none;
	text-shadow: #fff 0px 1px 0px;
	min-width: 0;
}
input[type=submit]:hover,
div.actions ul li a:hover,
td.actions a:hover {
	background: #f0f09a;
	background: -webkit-gradient(linear, left top, left bottom, from(#f7f7e1), to(#eeeca9));
}

/**  Actions_top (horizontal navigation)  **/
div.actions_top ul {
	margin: 0;
	padding: 0;
}
div.actions_top li {
	display: inline-block; /* (inline-block and top margin ) changes for navigations to not collapse on each other -Danh 05/20/2015*/
	margin: 1em 0 0 0; 
	list-style-type: none;
	white-space: nowrap;
	padding: 0;
}
div.actions_top ul li a {
	font-weight: normal;
	clear: both;
}
div.actions_top ul li a:hover {
	text-decoration: underline;
}

input[type=submit],
div.actions_top ul li a,
td.actions_top a {
	font-weight:normal;
	padding: 4px 8px;
	background:#e6e49f;
	background: -webkit-gradient(linear, left top, left bottom, from(#f1f1d4), to(#e6e49f));
	background: linear-gradient(#f1f1d4,#e6e49f);
	background-image: -moz-linear-gradient(top, #f1f1d4, #e6e49f);
	color:#333;
	border:1px solid #aaac62;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	text-decoration:none;
	text-shadow: #fff 0px 1px 0px;
	min-width: 0;
}
input[type=submit]:hover,
div.actions_top ul li a:hover,
td.actions_top a:hover {
	background: #f0f09a;
	background: -webkit-gradient(linear, left top, left bottom, from(#f7f7e1), to(#eeeca9));
}


/** Tables **/
table {
	background: #fff;
	/* border-right:0; */
	/* clear: both; */
	color: #333;
	margin-bottom: 3px;
	width: 100%;
}
th {
	border:0;
	border-bottom:2px solid #555;
	/* text-align: left; */
	padding:4px;
}
th a {
	display: block;
	padding: 2px 4px;
	text-decoration: none;
}
th a.asc:after {
	content: ' â‡£';
}
th a.desc:after {
	content: ' â‡¡';
}
table tr td {
	background: #fff;
	padding: 3px;
	text-align: r;
	vertical-align: top;
	border-bottom:1px solid #ddd;
}
table tr:nth-child(2n) td {
	background: #f5f5f5;
}
table .altrow td {
	background: #f5f5f5;
}
td.actions {
	text-align: center;
	white-space: nowrap;
}
table td.actions a {
	margin: 0px 1px;
	padding:2px 5px;
}
td.actions_top {
	text-align: center;
	white-space: nowrap;
}
table td.actions_top a {
	margin: 0px 6px;
	padding:2px 5px;
}
.cake-sql-log table {
	background: #f4f4f4;
}
.cake-sql-log td {
	padding: 4px 8px;
	text-align: left;
	font-family: Monaco, Consolas, "Courier New", monospaced;
}
.cake-sql-log caption {
	color:#fff;
}

/** Paging **/
div.paging {
	background:#fff;
	color: #ccc;
	margin-top: 1em;
	clear:both;
    text-align: center;
}
div.paging span.disabled {
	color: #ddd;
	display: inline;
}
div.paging span.current {
	color: #c73e14;
}
div.paging span a {
}

/** Scaffold View **/
dl {
	line-height: 2em;
	margin: 0em 0em;
	width: 60%;
}
dl .altrow {
	background: #f4f4f4;
}
dt {
	font-weight: bold;
	padding-left: 4px;
	vertical-align: top;
	width: 10em;
}
dd {
	margin-left: 10em;
	margin-top: -2em;
	vertical-align: top;
}

/** Forms **/
form {
	/* clear: both;	/* makes manual <form>'s to get pushed   */
	/* margin-right: 20px; */
	padding: 0;
	width: 95%;
}
fieldset {
	border: 1px solid #ccc;
	margin-bottom: 1em;
	padding: 16px 20px;
}
fieldset legend {
	background:#fff;
	color: #e32;
	font-size: 160%;
	font-weight: bold;
}
fieldset fieldset {
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 16px 10px;
}
fieldset fieldset legend {
	font-size: 120%;
	font-weight: normal;
}
fieldset fieldset div {
	clear: left;
	margin: 0 20px;
}
form div {
	/*clear: both;*/
	/*margin-bottom: 1em;*/
	/*padding: .5em;*/
	vertical-align: text-top;
}
form .input {
	color: #444;
}
form .required {
	font-weight: bold;
}
form .required label:after {
	color: #e32;
	content: '*';
	display:inline;
}
form div.submit {
	border: 0;
	/*clear: both;*/
	margin-top: 10px;
}
label {
	display: block;
	font-size: 110%;
	margin-bottom:0px;
}
input, textarea {
	clear: both;
	font-size: 120%;
	font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif;
	padding: 1%;
	width:98%;
}
select {
	clear: both;
	font-size: 120%;
	vertical-align: text-bottom;
}
select[multiple=multiple] {
	width: 100%;
}
option {
	font-size: 120%;
	padding: 0 3px;
}
input[type=checkbox] {
	clear: left;
	float: left;
	margin: 0px 6px 7px 2px;
	width: auto;
}
div.checkbox label {
	display: inline;
}
input[type=radio] {
	float:left;
	width:auto;
	margin: 0 3px 7px 0;
}
div.radio label {
	margin: 0 0 6px 20px;
}

.oos_action input[type=submit],.oos_action input[type=text] {
	display: inline;
	font-size: 90%;
	width: auto;
}

input[type=submit] {
	display: inline;
	font-size: 110%;
	width: auto;
}
form .submit input[type=submit] {
	background:#62af56;
	background: -webkit-gradient(linear, left top, left bottom, from(#a8ea9c), to(#62af56));
	background-image: -moz-linear-gradient(top, #a8ea9c, #62af56);
	border-color: #2d6324;
	color: #000;
	text-shadow: #8cee7c 0px 1px 0px;
}
form .submit input[type=submit]:hover {
	background:#4ca83d;
	background: -webkit-gradient(linear, left top, left bottom, from(#85e573), to(#4ca83d));
	background-image: -moz-linear-gradient(top, #85e573, #4ca83d);
}

/**
* Notices and Errors
**/
div.message {
	clear: both;
	color: #fff;
	font-size: 140%;
	font-weight: bold;
	margin: 0 0 1em 0;
	background: #c73e14;
	padding: 5px;
}
div.error-message {
	clear: both;
	color: #fff;
	font-weight: bold;
	background: #c73e14;
}
p.error {
	background-color: #e32;
	color: #fff;
	font-family: Courier, monospace;
	font-size: 120%;
	line-height: 140%;
	padding: 0.8em;
	margin: 1em 0;
}
p.error em {
	color: #000;
	font-weight: normal;
	line-height: 140%;
}
.notice {
	background: #ffcc00;
	color: #000;
	display: block;
	font-family: Courier, monospace;
	font-size: 120%;
	line-height: 140%;
	padding: 0.8em;
	margin: 1em 0;
}


/***
* Custome Session flash messages
***/
div.flash_success {
	background: green;
	color: #fff;
	clear: both;
	font-size: 140%;
	font-weight: bold;
	margin: 0 0 1em 0;
	padding: 5px;
}
div.flash_error {
	background: #FF0000;
	color: #fff;
	clear: both;
	font-size: 140%;
	font-weight: bold;
	margin: 0 0 1em 0;
	padding: 5px;
}
div.flash_warning {
	background: #FF7300;
	color: #fff;
	clear: both;
	font-size: 140%;
	font-weight: bold;
	margin: 0 0 1em 0;
	padding: 5px;
}



/** Related **/
div.related {
	clear: both;
	display: block;
}

/** Debugging **/
pre {
	color: #000;
	background: #f0f0f0;
	padding: 1em;
}
pre.cake-debug {
	background: #ffcc00;
	font-size: 120%;
	line-height: 140%;
	margin-top: 1em;
	overflow: auto;
	position: relative;
}
div.cake-stack-trace {
	background: #fff;
	color: #333;
	margin: 0px;
	padding: 6px;
	font-size: 120%;
	line-height: 140%;
	overflow: auto;
	position: relative;
}
div.cake-code-dump pre {
	position: relative;
	overflow: auto;
}
div.cake-stack-trace pre, div.cake-code-dump pre {
	color: #000;
	background-color: #F0F0F0;
	margin: 0px;
	padding: 1em;
	overflow: auto;
}
div.cake-code-dump pre, div.cake-code-dump pre code {
	clear: both;
	font-size: 12px;
	line-height: 15px;
	margin: 4px 2px;
	padding: 4px;
	overflow: auto;
}
div.cake-code-dump span.code-highlight {
	background-color: #ff0;
	padding: 4px;
}
div.code-coverage-results div.code-line {
	padding-left:5px;
	display:block;
	margin-left:10px;
}
div.code-coverage-results div.uncovered span.content {
	background:#ecc;
}
div.code-coverage-results div.covered span.content {
	background:#cec;
}
div.code-coverage-results div.ignored span.content {
	color:#aaa;
}
div.code-coverage-results span.line-num {
	color:#666;
	display:block;
	float:left;
	width:20px;
	text-align:right;
	margin-right:5px;
}
div.code-coverage-results span.line-num strong {
	color:#666;
}
div.code-coverage-results div.start {
	border:1px solid #aaa;
	border-width:1px 1px 0px 1px;
	margin-top:30px;
	padding-top:5px;
}
div.code-coverage-results div.end {
	border:1px solid #aaa;
	border-width:0px 1px 1px 1px;
	margin-bottom:30px;
	padding-bottom:5px;
}
div.code-coverage-results div.realstart {
	margin-top:0px;
}
div.code-coverage-results p.note {
	color:#bbb;
	padding:5px;
	margin:5px 0 10px;
	font-size:10px;
}
div.code-coverage-results span.result-bad {
	color: #a00;
}
div.code-coverage-results span.result-ok {
	color: #fa0;
}
div.code-coverage-results span.result-good {
	color: #0a0;
}

/** Elements **/
#url-rewriting-warning {
	display: none;
}



/*****************
* Tigra's Calendar CSS
*****************/
/* calendar icon */
img.tcalIcon {
	cursor: pointer;
	margin-left: 1px;
	vertical-align: middle;
    height: 20px;
    width: 20px;
}
/* calendar container element */
div#tcal {
	position: absolute;
	visibility: hidden;
	z-index: 100;
	width: 250px;
	padding: 2px 0 0 0;
}
/* all tables in calendar */
div#tcal table {
	width: 100%;
	border: 1px solid silver;
	border-collapse: collapse;
	background-color: white;
}
/* navigation table */
div#tcal table.ctrl {
	border-bottom: 0;
}
/* navigation buttons */
div#tcal table.ctrl td {
	width: 15px;
	height: 20px;
}
/* month year header */
div#tcal table.ctrl th {
	background-color: white;
	color: black;
	border: 0;
}
/* week days header */
div#tcal th {
	border: 1px solid silver;
	border-collapse: collapse;
	text-align: center;
	padding: 3px 0;
	font-family: tahoma, verdana, arial;
	font-size: 10px;
	background-color: gray;
	color: white;
}
/* date cells */
div#tcal td {
	border: 0;
	border-collapse: collapse;
	text-align: center;
	padding: 2px 0;
	font-family: tahoma, verdana, arial;
	font-size: 11px;
	width: 22px;
	cursor: pointer;
}
/* date highlight
   in case of conflicting settings order here determines the priority from least to most important */
div#tcal td.othermonth {
	color: silver;
}
div#tcal td.weekend {
	background-color: #ACD6F5;
}
div#tcal td.today {
	border: 1px solid red;
}
div#tcal td.selected {
	background-color: #FFB3BE;
}
/* iframe element used to suppress windowed controls in IE5/6 */
iframe#tcalIF {
	position: absolute;
	visibility: hidden;
	z-index: 98;
	border: 0;
}
/* transparent shadow */
div#tcalShade {
	position: absolute;
	visibility: hidden;
	z-index: 99;
}
div#tcalShade table {
	border: 0;
	border-collapse: collapse;
	width: 100%;
}
div#tcalShade table td {
	border: 0;
	border-collapse: collapse;
	padding: 0;
}

button {
    margin: 5px;
}

.custom-class {
    margin: 2px;
}

table#amazonapi  {
    font-size:12px;
}

div#alert {
    font-color:red;
}

@media print {
	div.index_wrapper{
		display:none;
	}

	div#debug-kit-toolbar {
		display:none;
	}

	h1,h2,h3 {
		display:none;
	}

	form input,button,img#tcalico_2{
		display:none;
	}

	table button {
		display:block;
	}

	table {
		page-break-after:always;
	}
}

Graziel · August 21, 2019, 4:41pm

css can be also loaded using javascript so to be sure you would need to check network tab in chrome dev tools and see what css is loaded

Topic		Replies	Views
Index.ctp page display extra li Class at NavBar when view screen size is smaller Need Help	5	262	September 18, 2021
Error with last version of Chrome only : the entire site doesn't display Need Help	1	409	June 17, 2019
I can used dompdf plugin but in pdf javascript is not working after enabling the $dompdf_option->setIsJavascriptEnabled(true); Need Help	2	1344	December 17, 2019
Display none is being displayed Need Help	3	1063	March 22, 2021
Do not capitalize labels Need Help	1	228	November 3, 2022

Page print preview and printing

Releases

Documentation

Community

Page print preview and printing

Related Topics

Releases

Documentation

Community