Reputation: 91
HTML/CSS Print Layout issue - adding extra page on chrome
I have an HTML page and I am trying to fix the print layout issues on all of the browsers. Here is the code
<style type="text/css">
@media print {
* {
overflow: visible !important;
}
body {
height: auto;
color: #000;
background: #fff!important;
}
nav, aside {
display: none;
}
a-page {
float: left;
margin: 0;
box-shadow: 0;
page-break-inside: avoid;
widows: 3;
orphans: 3;
}
#header, #menu, #sidebar{ height:1px; display:none;}
@page {
size: A4 portrait;
}
ul.grid-container {
margin: 0;
padding: 0;
}
}
body {
background: rgb(204,204,204);
}
a-page {
width: 21cm;
height: 29.7cm;
background: white;
display: block;
margin: 1cm auto;
}
ul.grid-container {
border:0px dashed black;
width:100%;
vertical-align: middle;
text-align: center;
table-layout: fixed;
list-style-type: none;
padding-left: 0;
margin-top: 0
}
ul.grid-container .container {
border: 1px dashed black;
width: 49.7%;
height: 100%;
float: left;
position: relative
}
p.fcards {
padding-left:10px;
padding-right:10px;
text-align:center;
}
p.fc_sm {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 1em;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
p.fc_md {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 1.5em;
}
p.fc_lg {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 2em;
}
.size_4x2 .grid-container li{
height:7.4cm;
}
</style>
<body class="size_4x2">
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
</body>
https://jsfiddle.net/lajin/myf8nfpk/
When I see print layout
- On Chrome it add an extra page before each page
- On FF the page loads fine but margins on top is different on first pages
- IE there is Huge bottom margin as it shrinks to fit the screen
Any suggestions on how to fix the print page issues?
Thank you for you help in advance.
Upvotes: 2
Views: 1586
Answers (1)
Reputation: 2236
Most of your problems have been caused by inefficient usage of margins, padding and borders. I solved this problem by first stripping away the irrelevant code by removing class definitions that were never called upon and removing lines that I knew or suspected were not influential, test running the new code after each removal to ensure no difference was made to the performance of the page.
My next step was to add the following CSS code to the beginning of the CSS component...
*
{
box-sizing : border-box;
margin : 0;
padding : 0;
}
By default borders are not included in the defined dimensions of an area and are instead added to the outside of the area. By using box-sizing : border-box; at the highest level you force each area's borders to be included within it's area.
The default behaviour of margins and padding can also be a cause of much hidden grief. By setting them to 0 at the highest level you can then afford to ignore them until such time as you know they are going to be needed for a specific class or id definition, at which point you would define them as per normal.
Next, I changed the line -
margin: 1cm auto;
to -
margin : auto;
As your file is currently coded this has the effect of making it appear as if large amounts of padding surround the A4 sheet which can look fine on-screen, but it is still included in the printed area which can cause poor layout when printing. There are a few ways of getting around this problem. I would suggest regarding a-page as the A4 area and adding within that div a second div such as a-page-text-area wherein would be placed the actual text. For now I am using margin : auto; to keep the page centred horizontally and using buffer regions to separate the pages vertically.
Finally, with the class definitions ul.grid-container .container and ul.grid-container you are relying on one definition to overwrite the properties of another. In more complex programs this can lead to errors occuring in some circumstances. As a matter of good practice I recommend placing all shared property definitions within a common class or classes and all peculiar property definitions in an id. Please note that when opening a div code such as class = "container-grid container-all" can be used to apply the attributes of more than one class to that div.
The complete code that I used to fix your problem follows...
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport"
content = "width=device-width, initial-scale=1.0"
>
<style type = "text/css">
*
{
box-sizing : border-box;
margin : 0;
padding : 0;
}
@media print
{
@page
{
size : A4 portrait;
}
.a-page
{
float : left;
page-break-inside : avoid;
}
body
{
background : #fff!important;
}
}
body
{
background : rgb( 204, 204, 204 );
}
.a-page
{
background : white;
display : block;
height : 29.7cm;
margin : auto;
width : 21cm;
}
.buffer-region
{
min-height : 20px;
}
.container
{
border : 1px dashed black;
width : 50%;
}
.fc_sm
{
font-size : 1em;
left : 50%;
margin : 0;
position : absolute;
top : 50%;
transform : translate(-50%, -50%);
}
.grid-container
{
list-style-type : none;
width : 100%;
}
.grid-container .container
{
float : left;
height : 100%;
position : relative;
}
.size_4x2 li
{
height : 7.4cm;
}
</style>
</head>
<body class = "size_4x2">
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
<div class = "buffer-region">
</div>
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
<div class = "buffer-region">
</div>
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
</body>
</html>
If you have any questions or comments, then please feel free to ask / make them.
Upvotes: 4
Related Questions
- Hundreds of blank pages and/or disproportion when printing a web page, after chrome version ~103 release (solved)
- Google Chrome Printing Page Breaks
- Chrome printing website, missing layout options
- Google chrome prints extra page
- Remove blank page when printing on google chrome
- CSS Print layout is adding an extra page
- Issue with Print Page break - Print preview in browsers
- Chrome window.print() missing page elements
- css layout - second blank page when printing
- CSS Print stylesheet - padding on the second page