While printing the page the header moves up after 3,4 pages - html

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

Related

How to Decrease HTML A4 size margin in CSS

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.

CSS Error while i save my docoment as pdf

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

Printing from my Web App to a Zebra Printer (label printer) messing up style

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

Scroll bar CSS to a table only

I've created a responsive table CSS and I want a specific CSS to the scroll bar of the table.
But, when inserting this code, the browser scroll bar also changes.
How to specifically use this design to my table?
body {
padding:1.5em;
background: #f5f5f5
}
table {
border: 1px #a39485 solid;
font-size: .9em;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,.25);
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-radius: 5px;
overflow: hidden;
}
th {
text-align: center;
}
thead {
font-weight: bold;
color: #fff;
background: #0088CC;
}
td, th {
padding: 1em .5em;
vertical-align: middle;
}
td {
border-bottom: 1px solid rgba(0,0,0,.1);
background: #fff;
}
a {
color: #73685d;
}
#media all and (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
text-align: right;
}
table {
position: relative;
padding-bottom: 0;
border: none;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
thead {
float: left;
white-space: nowrap;
}
tbody {
overflow-x: auto;
overflow-y: hidden;
position: relative;
white-space: nowrap;
}
tr {
display: inline-block;
vertical-align: top;
}
th {
border-bottom: 1px solid #a39485;
}
td {
border-bottom: 1px solid #e5e5e5;
}
}
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Please help.
You should be able to target the table scrollbar specifically just like any other css element by putting table before the scorll bar selector. So you could do:
table::-webkit-scrollbar{
/*Your styles here*/
}
table::-webkit-scrollbar-thumb{
/*Your styles here*/
}
table::-webkit-scrollbar-thumb:window-inactive{
/*Your styles here*/
}
Proof of concept here: http://codepen.io/supah_frank/pen/JooNKx
EDIT: Additionally, I've noticed a few weird quirks while playing around with this in chrome (Don't know if it affects other browsers).
First, the css for the scroll bars seems to cache, so make sure to do a hard refresh (ctrl + F5) after changing the css.
Second, even if you are not styling it, you need to target and apply some style to {your element}::-webkit-scrollbar before making any other changes to the scroll bar for an element (I found display: block works if you don't want to really make any changes). If you don't target it, none of the other css on the scroll bar will work for some odd reason.

Photo floating over page elements?

I have a header photo, and usually they are fairly easy to set up. However, for some reason which I cannot find, the header image floats over the elements of the HTML page.
Any help would be appreciated. I have tried looking for any margins/padding I forgot to delete, but there are none.
Picture of problem...
HTML pertaining to header image:
<div id="gallery">
<div id="imgContain">
<img src="pictures/clubhouse.jpg">
</div>
</div>
My CSS File: (not sure where the problem is, so I posted all of it...)
html, body
{
margin: 0;
padding: 0;
background-attachment: fixed;
background-image: url('.././pictures/04.jpg');
background-color: rgb(56,32,32);
}
#font-face
{
font-family: fancyFont;
src: url('fonts/fancy.otf');
}
#wrapper
{
min-width: 1000px;
margin: auto;
}
#content
{
background-color: white;
display: table;
border-radius: 5px;
bottom: 0px;
left: 0;
margin: auto;
right: 0;
top: 0;
width: 915px;
height: 100%;
box-shadow: 5px 5px 22px black;
}
#content p
{
padding: 25px;
font-family: Arial;
text-indent: 30px;
font-size: 1em;
word-wrap: break-word;
}
center
{
border-bottom: 1px solid black;
}
table
{
border: 1px solid black;
float: left;
}
.main-table /*Main table is the navigation table to the left...*/
{
background-color: white;
margin-bottom: 25px;
border: 4px double white;
width: 245px;
box-shadow: 0px 0px 10px black;
}
.main-table td
{
padding: 10px;
padding-left: 15px;
}
.main-table td a
{
text-decoration: none;
color: black;
font-family: Arial;
transition: .2s;
font-size: .9em;
padding-left: 20px;
}
.main-table td a:hover
{
border-bottom: 1px solid black;
color: black;
padding-left: 50px;
transition: .2s;
}
.main-table h1
{
font-family: fancyFont;
padding:10px;
color: black;
text-shadow: 2px 2px 1px white;
}
.division /*Division(s) are the small info boxes in the center.*/
{
margin-top: px;
margin-left: 40px;
border: none;
margin-bottom: 0px;
}
.division th
{
width: 250px;
background-color: white;
border-bottom: 3px double black;
padding: 10px;
font-family: fancyFont;
}
.division tr td
{
display: inline-block;
width: 250px;
height: 100px;
max-width: 250px;
}
#gallery
{
width: 100%;
height: 100px;
}
#gallery h1
{
font-family: fancyFont;
text-shadow: 2px 2px 1px #acacac;
}
#gallery img
{
width: 100%;
height: 450px;
border-bottom: 1px solid black;
}
table ul li
{
list-style: square;
font-family: Arial;
}
#imgContain
{
background-color: white;
width: 100%;
margin: 0;
padding: 0;
}
#table-container
{
width: 900px;
margin: 0;
}
take out the
#gallery{height:100px;}
css because your gallery img height is 450px and the two conflict.
An element will "float" over another element when the floating element's position is set to absolute. I don't see position: absolute; in your CSS, but I do see positioning styles (bottom: 0px; left: 0; etc.) so maybe another style sheet is applying position: absolute. Best way would be to inspect the elements using a browser inspector like Firefox has and see what CSS styles are being applied. You can send me the URL and I will look at it. If you just want to throw a dart at the board you could try setting this style:
#gallery {
position: static !important;
}
Floating generally happens when position: absolute is set in CSS, but strangely, it's not your case.
So, you can try to add a CSS property to this image, called z-index with the value of -1. It'll possibly work.
This property is a kind of "layers". By default, every element is set in z-index: 0.
So, basically, it'll be:
img {
z-index: -1;
}
or, in this case:
#gallery {
z-index: -1;
}
Sorry if my english is bad.