I'm trying to get google chrome to do page breaks.
I've been told via a bunch of websites that page-break-after: always; is valid in chrome but I can not seem to get it to work even with a very simple example. is there any way to force a page break when printing in chrome?
I've used the following approach successfully in all major browsers including Chrome:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
This is a simplified example. In the real code, each page div contains many more elements.
Actually one detail is missing from the answer that is selected as accepted (from Phil Ross)....
it DOES work in Chrome, and the solution is really silly!!
Both the parent and the element onto which you want to control page-breaking must be declared as:
position: relative
check out this fiddle:
http://jsfiddle.net/petersphilo/QCvA5/5/show/
This is true for:
page-break-before
page-break-after
page-break-inside
However, controlling page-break-inside in Safari does not work (in 5.1.7, at least)
i hope this helps!!!
PS: The question below brought up that fact that recent versions of Chrome no longer respect this, even with the position: relative; trick.
However, they do seem to respect:
-webkit-region-break-inside: avoid;
see this fiddle:
http://jsfiddle.net/petersphilo/QCvA5/23/show
so i guess we have to add that now...
Hope this helps!
I just wanted to note here that Chrome also ignores page-break-* css settings in divs that have been floated.
I suspect there is a sound justification for this somewhere in the css spec, but I figured noting it might help someone someday ;-)
Just another note: IE7 can't acknowledge page break settings without an explicit height on the previous block element:
http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/
I had an issue similar to this but I found the solution eventually. I had overflow-x: hidden; applied to the <html> tag so no matter what I did below in the DOM, it would never allow page breaks. By reverting to overflow-x: visible; it worked fine.
Hopefully this helps somebody out there.
I'm having this problem myself - my page breaks work in every browser but Chrome - and was able to isolate it down to the page-break-after element being inside a table cell. (Old, inherited templates in the CMS.)
Apparently Chrome doesn't honor the page-break-before or page-break-after properties inside table cells, so this modified version of Phil's example puts the second and third headline on the same page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
Chrome's implementation is (dubiously) allowed given the CSS specification - you can see more here: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en
Beware of CSS : display:inline-block when printing.
None of the CCS property to go to next page would work for me in Chrome and Firefox if my table was inside a div with the style display:inline-block
For example, the following doesn't work :
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
But the following work :
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
2016 update:
Well, I got this problem, when I had
overflow:hidden
on my div.
After I made
#media print {
div {
overflow:initial !important
}
}
everything became just fine and perfect
I faced this issue on chrome before and the cause for it is that there was a div has min-height set to a value.
The solution was to reset min-height while printing as follows:
#media print {
.wizard-content{
min-height: 0;
}
}
This did the trick for me (2021 Chrome):
#media print {
.page-break {
display: block; // <== this can be missing sometimes
break-before: always;
page-break-before: always;
}
}
If you are using Chrome with Bootstrap Css the classes that control the grid layout eg col-xs-12 etc use "float: left" which, as others have pointed out, wrecks the page breaks. Remove these from your page for printing. It worked for me. (On Chrome version = 49.0.2623.87)
It's now 2021 and this topic is the first result when searching for the exact issue with Chrome. I found this is a very simple solution that works and can be slapped into your without any additional effort to at least affect Chrome page breaking in the middle of a :
<style>
#media print {
tr, th, td {
page-break-inside: avoid !important;
}
}
</style>
Hopefully that helps save someone time.
Have that issue. So long time pass...
Without side-fields of page it's break normal, but when fields appears, page and "page break space" will scale. So, with a normal field, within a document, it was shown incorrect.
I fix it with set
width:100%
and use
div.page
{
page-break-before: always;
page-break-inside: avoid;
}
Use it on first line.
As far as I know the only way to get the correct page breaks in tables with Google Chrome is giving it to the element <tr> the property display: inline-table (or display: inline-block but it fits better in other cases that are not tables). Also should be used the properties "page-break-after: always; page-break-inside: avoid;" as written by #Phil Ross
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
I was printing 16 labels on A4 page landscape rotation, 4 labels per row, page was breaking in the last row and only 12 label were on one page in chrome only,
I was using display:inline-block; on a div, then replaced it with float:right; and it worked!
It was working for me when I used padding like:
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>
Related
I am using print css to hide certain elements and also to stop page breaks when I don't want them. The user can choose to hide sections before they print.
My problem is that when I print-preview there is always an extra blank page (at the end in Chrome and Firefox, and at the beginning in Opera) and I cannot figure out why. IE does not have a problem, no extra pages (which is shocking...)
I would greatly appreciate some input. I have tried making the container div page-break-after: avoid; and page-break-after: auto; but neither worked. Also taking out the table.plain { page-break-inside:avoid; } did not make a difference.
The exclude class is added to a table when the user clicks the hide icon. This works and anything with the exclude class does not show in print. The final page the user wants to print may fit on one page or may not.
Here is my html:
<body>
<div id="main">
<div id="content">
<div id="side" class="exclude">
...logo, etc, shown at side on screen...
</div>
<div id="data">
<table class="printOnly plain printHeader">
...logo, etc, to print at top...
</table>
<div>
<table class="detail plain">
<tbody>
<tr>
<td class="rel">
<div class="abs exclude visibility">
Show
Hide
</div>
<h3>Contact</h3>
</td>
</tr>
...more tr with contact details...
</tbody>
</table>
...more tables with other details...
</div>
</div> //data
</div> //content
</div> //main
</body>
Here is my print css:
#media print {
.exclude {
display: none !important;
}
.printOnly {
display:block !important;
}
div#data,
div#data div {
width: 98% !important;
border: none !important;
}
table.plain { page-break-inside:avoid; }
}
Many thanks in advance for your help :)
Most of the times you’ll specify
html, body { width: 100%; height: 100%; }
The print driver in your browser doesn’t like this. So to fix that just add this to your print.css file
html, body { height: auto; }
No more blank page printing.
the solution is explained at this page
hope helps everyone
I'm gonna suggest that you try using a CSS reset. Resets are supposed to help different browsers display the website in the same way. You could try the one at http://meyerweb.com/eric/tools/css/reset/ but I have never used it so I can't really say how it will work. You could also try googling for a CSS reset specifically for print styles.
For Firefox: If the blank page is visible at print preview, go to print--> page setup and reduce the scale until the blank disappears from print preview. This worked for me.
To solve this issue using a media query instead of a separate print.css, try the following:
html, body {
height: 100%;
#media print {
/* This fixes an issue where when printing a selection,
an extra blank page is printed in IE10 and IE11.
Solution found here: http://stackoverflow.com/a/22320644/7752 */
height: auto;
}
}
I have a problem with this one... because it gives me the scrollbar but the height remains the same so the text is covered by the scroll bar...
<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
Thanks in advance!
Move your css to an external style sheet and use a conditional comment to target just the browsers you are having a problem with (I have used lower than or equal to IE7 as I cannot replicate in IE8). I have added padding to the bottom.
Live example: http://jsfiddle.net/tw16/Vx9HZ/
Put the conditional comment in the <head> like this:
<head>
<!--[if lte IE 7]>
<style>div.messages {padding:0 0 22px;}</style>
<![endif]-->
</head>
CSS: Moved to external style sheet.
div.messages {
border:0px;
padding:0 0 0;
width:100%;
overflow-x:auto;
background-color:#66C2FF;
}
HTML: Stripped out styling.
<td class='messages'>
<div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
If I understand you correctly then the following should solve your issue and ALWAYS break a line to accommodate the width if specified. Put this in your style="".
word-wrap: break-word
PS. Also, you have "height:" with no height specified.
This works for me:
<html>
<body>
<td class='messages'>
<div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF; height= 50PX; class=messages;'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
</body>
</html>
I specified a height for the div that was big enough to show the text and the scroll bar. =) Hope this helps.
I have a strange issue where my head (h1, h2, h3, h4, etc.) margins are collapsing on me, but only in IE8. I've spent a good deal of time trying to pinpoint the issue I am having, and have narrowed it down to this example.
I am almost completely certain that no other page objects can be removed (including the DOCTYPE declaration) while still representing this bug. To make the code as compact as possible, the bug only appears after modifying the display property a couple of times, but the real page has an issue each time the display property is modified (i.e. immediately after any "nav" is followed).
I attempted posting this as a jsFiddle, but it was not reproduceable from the result pane. Therefore, I will post the entire, simplified test case inline, written as small/clean as possible:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bug Test of IE8 Collapsing Margin problem</title>
<style type="text/css">
h2 {
margin: 20px 0 15px -10px;
background: red;
} h3 {
margin: 10px 0 15px -10px;
background: green;
} h4 {
margin-bottom: -15px;
background: blue;
} .noShow {
display: none;
}
</style>
<script type="text/javascript">
function show(theDiv) {
theDiv = document.getElementById(theDiv);
Div1 = document.getElementById('div1');
Div2 = document.getElementById('div2');
Div1.style.display = 'none';
Div2.style.display = 'none';
theDiv.style.display = 'block';
}
</script>
</head>
<body>
<ul>
<li>Nav1</li>
<li>Nav2</li>
</ul>
<div id="div1">
<h1>Head1</h1>
<h2>Head2</h2>
<h3>Head3</h3>
<h4>Head4</h4>
<br><br>
Click on "Nav2," then "Nav1," then "Nav2" a second time to see the shift
in header margins/padding.<br>
</div>
<div id="div2" class="noShow">
<h1>Head1</h1>
<h2>Head2</h2>
<h3>Head3</h3>
<h4>Head4</h4>
</div>
</body>
</html>
I've begun reading a bit about margin collapse and how it's supposed to act this way, but if that's the case, why is IE8 the only browser I've tested with this behavior, and why is it not consistent? I've also tried switching margin with padding to achieve a similar result without the collapsing issue, but unless I did something incorrectly, that had no effect either.
I've tried applying overflow:hidden to the noShow declaration. This fixes the problem, but I cannot use it in my design. (Even when adjusting this in the example, it looks wrong and is still inconsistent in its placement.)
Does anyone have any good suggestions on how to work around this problem? I'd hate to have to turn off my DOCTYPE and force IE7 mode, as I lose other features (such as pseudo-element :before).
Does this work for you?
http://jsfiddle.net/7qymJ/1/
Edit:
http://jsfiddle.net/7qymJ/ - reproduces your error in IE8
Kyle gave me the information I needed to get to my solution, and I have already accepted his solution, as he gave me the important parts to solve my specific case. For ease of searching, I will post my specific solution here.
I made simple modifications to the CSS, JS, and HTML in combination to achieve my desired result. Using the example I posted as a basis, I made the following changes:
h2, h3, h4 {
...
width: 100%;
}
function show(theDiv) {
...
theDiv.style.Display = "inline-block";
}
In addition, my specific example had a div with multiple class assignments:
<div id="div1" class="content">Initially Visible</div>
<div id="div2" class="content noShow">Initially Invisible</div>
I modified this by removing the multiple class assignments and creating (yet another) nested div:
<div class="content">
<div id="div1">Initially Visible</div>
<div id="div2" class="noShow">Initially Invisible</div>
</div>
The combination of all 3 elements (of which two were given to me by Kyle, and the third was not included in my example posting) resulted in expected output.
here a minimum version to reproduce the failure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
.clear{clear:both;}
.col{float:left;}
.row{margin-bottom:30px;background-color:red;}
</style>
</head>
<body>
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
</body>
</html>
It is a Bug of Firefox or I misunderstand something.
Edit:
Forgot to explain the Problem. When im using margin-bottom for the .row in combination with a float in .col Then the element will be dropped down for the same value as the .row margin-bottom has
I'm not entirely sure why Firefox is behaving differently to other browsers here. It is something to do with collapsing margins.
However, you can easily fix it (no moving down in Firefox, consistency between browsers) by:
Adding overflow: hidden to .row as an alternate way to clear the float.
You can then remove the <div class="clear"></div> because it's no longer required.
Looks fine here:
JSFiddle
You will be wanting padding-bottom:30px; instead of margin-bottom:30px;
i think you are assuming that it should pad the red row 30px on the bottom? You want padding-bottom then. The margin-bottom will put a 30px gap between the .row and the next element underneath it.
check this fiddle for what I mean
there is no failure
make another div with class="row" underneath and you will see the margin-bottom:
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
<!-- here is 30px space -->
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
i think, the problem for him is, when you use firebug and make margin-bottom greater...then the body will go down.
If you use height then the body will not go down. Tested in FF 3.6.15
Or use padding with the margin...then the body do not move down.
Add to my comments here:
.row {
background-color: red;
margin-bottom: 30px;
padding-bottom: 1px;
}
The issue is related to floated elements being removed from the normal flow and you're expecting that element to act the same. Firefox is acting as it should. Sorry I don't have time to work this out.
thirtydot, you are right - this is because of collapsing margins. I was in a similar situation. However, you can't say that it's a bug of only FireFox. In fact, in Chrome, my margins didn't used to collapse even without the float being broken. In FireFox, on the other hand, the margins collapsed for me despite broken float (whether with overflow: hidden/auto, a cleared element between, or whatever). Funnily enough, the margins where collapsing between a child and a parent, which is not supposed to happen according to W3C specs. Moreover, a positive padding fixed this issue.
As a conclusion, I can say that no browser is 100% W3C/IEEE/ISO standards-compliant. However, I don't really care which browser complies to which exact standard. What matters is that they all comply to the same standard. This is not happening, and I doubt it ever will.
I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>