I have a problem in CSS. I have a CSS code of A4 Size Page. I want to reduce top margin of my A4 size HTML page.
I tried too much time but I failed can anyone one please help me?
Please run the code snippet in full page view to see the correct result of the code.
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #F0F0F0;
font: 12pt "Times New Roman";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 210mm;
min-height: 297mm;
padding: 18mm;
margin: 5mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
-webkit-print-color-adjust: exact
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-top: 2px solid #009;
}
a:link {
text-decoration: black;
}
a:visited {
text-decoration: black;
}
a:hover {
text-decoration: none;
}
<div class="page">
<div style=" margin:auto; width:60px; height:auto; align: middle">
Test Text
</div>
</div>
try by assigning margin at all side.
#page {
size: A4;
margin: 0 1em 1em 1em;
}
and remove margin and padding from other classes which may affect the page.
Related
I don't know how to explain this issue. In my html web page the data is showing perfectly inside each page. When I try to print in the initial pages the data table fits inside the page but after 2,3 pages the header moves up. For more clarity I am posting the images below.
I am looping the same table with different data.
First Page
Third Page
At the end of the page it shows like this
My css code:
<style>
.verticaltext{
writing-mode: vertical-rl;
transform:scale(-1);
}
page {
background: white;
display: block;
margin: 0 auto;
/* margin-bottom: 0.5cm; */
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
.table-wtotbr {
width: 100%;
}
.table-wtbr {
width: 100%;
}
.table-wtotbr th, td {
border-bottom: 1px solid black;
}
.table-wtbr th, td {
border: 1px solid black;
}
.container-table {
color: black;
width: 100%;
height: 99% !important;
font-size: 11px;
/* border: 2px solid red; */
}
.footer {
position: fixed;
bottom: 0;
width: 95%;
}
.checkbox {
width: 12px;
height: 12px;
border: 1px solid #000;
display: inline-block;
}
</style>
<style type="text/css" media="print">
#media print {
html, body {
/* border: 5px solid red; */
color: black;
margin: 2px !important;
padding: 0px !important;
width: 100% !important;
height: 100vh !important;
/* overflow: hidden !important; */
font-size: 15px;
}
#page {
page-break-inside: avoid;
size: A4 landscape;
margin: 0 !important;
height: 99% !important;
}
.footer {
display: table-cell;
vertical-align: bottom;
}
.container-table {
border: 5px solid red;
overflow: hidden !important;
color: black;
width: 99% !important;
font-size: 11px;
}
}
</style>
Can anyone help me with this. Thank you in advance.
I solved the issue by adding following codes in the container div.
.container-table {
page-break-inside: avoid;
page-break-before: avoid;
page-break-after: avoid;
height: 99% !important;
padding-top:10px;
/* border: 5px solid red; */
/* overflow: hidden !important; */
color: black;
width: 99% !important;
font-size: 11px;
}
I want print html to label printing using thermal printer but paper size is so difficult to adjust.
this is a few of my css code for printing
#media print {
#page {
size: 5cm 7cm portrait;
margin: 0 1mm 0 1mm;
}
body{
width:100%;
height:100%;
margin: 0;
}
}
below is preview i wanted to print
this what i want
Try this for set paper size A4.
HTML
<div>
<div class="page">
<div class="subpage">Page 1/2</div>
</div>
<div class="page">
<div class="subpage">Page 2/2</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
Demo:
print()
#page {
size: A4 landscape;
margin: 0;
}
html, body {
margin: 0;
}
html {
background: cyan;
}
body {
width: 297mm;
height: 210mm;
background: red;
}
The dimensions for A4 landscape are correct, but the print overflows to the second page. These happens in Win 10 Chrome 63, FF 52 and Edge 41.
When I use the portrait dimensions and print A4 Portrait, then only one page is printed as expected, without any overflow.
Does anybody have any clues to this issue? Does it occur on every platform?
Thank you in advance
used body {margin-top: -1px }
print()
#page {
size: A4 landscape;
margin: 0;
}
html, body {
margin: 0;
}
html {
background: cyan;
}
body {
width: 297mm;
height: 210mm;
background: red;
margin-top: -1px;
}
refer this solution:
html:
<div class="book">
<div class="page">
<div class="subpage">Page 1</div>
</div>
</div>
css:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
/*width: 210mm;
min-height: 297mm;*/
width:297mm;
min-height:210mm;
padding: 20mm;
margin: 10mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
js:
window.print();
Try
body {
margin-top: -1px;
}
It might not work but this is my best guess.
I have an HTML page which i used to print data from mysql db.
My code is working fine.
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #F0F0F0;
font: 12pt "Times New Roman";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 210mm;
min-height: 297mm;
padding: 18mm;
margin: 5mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
-webkit-print-color-adjust: exact
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
PROBLEM:
When i give command to print and select save as pdf then my one page document is convert into two pages and second page is blank.
How i can solve this problem?
Try This
#media print {
footer {page-break-after: Avoid;}
}
Im trying to print labels I create dynamically in my web app to a zebra printer.
The problem is that the zebra printer messes up the style.
The first one looks good but then the second one starts coming out weird, and the third worst and so on.
Im trying to make them 4 x 6 inches.
Here is the style.
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 6pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page{
width: 8.0in;
min-height: 4in;
padding: 8mm;
margin: 21mm auto;
border: 1px #CCD6E0 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 2mm;
border: 3px #718DA9 solid;
height: 3.7in;
outline: .5cm #CCD6E0 solid;
}
#media print {
html, body {
width: 6in;
height: 4in;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
HERE IS THE TABLE