CODEWITHSUNDEEP
cssgoogle-chromeprinting
jilseego
jilseego

Reputation: 1103

page-break-* doesn't work on Google chrome

I just like the divs under .wp_left_col div be placed in separate pages. This is my css code.

.wpi_left_col > div {
     page-break-after: always !important;
     page-break-inside: avoid !important;
}

It works on Firefox. How come it doesn't work on Google Chrome?

Upvotes: 19

Views: 38338

Answers (6)

Jeremy C.
Jeremy C.

Reputation: 115

here's an easier solution for setting all parent elements to not float on print:

@media print {
  * { 
    float: none !important; 
  }
  .tab {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}

Upvotes: 0

Joe Esteves
Joe Esteves

Reputation: 91

3 years later float:none !important for div was the solution for getting the break working in chrome. Not necessary to float:none all parents (body or html)

@media print {
    div {
        float: none !important;
    }
}

Upvotes: 7

Sid Krishnan
Sid Krishnan

Reputation: 451

It's July 2014, and as of today doing float: none; for all parent elements is what worked for me:

@media print {
  table {float: none !important; }
  div { float: none !important; }
  .page-break { page-break-inside: avoid; page-break-before: always; }
  .dont-print { display: none; }  
}

This solution works on Firefox, Chrome and Safari. I have the !important in there because I'm using Bootstrap, and bootstrap does a float: left by default on divs.

Upvotes: 11

Matthew Nolting
Matthew Nolting

Reputation: 199

So, after some frustration, I found a solution. It's a hack, but Chrome doesn't support page breaks properly, so.. You have to set all of the parent elements to explicitly float: none. In this example, I'm printing tabbed content.

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="tab">print page 1</div>
                <div class="tab">print page 2</div>
                <div class="tab">print page 3</div>
            </div>
        </section>
    </main>
</body>

Then your CSS looks similar to this. 

html, body, .main-content, .tabs, .tabbed-content { float: none; }

.tab {
    display: block; /* unhide all tabs */
    break-before: always;
    page-break-before: always;
}

Upvotes: 14

user663031
user663031

Reputation:

<div style="display: inline-block; "> has been reported as a way to avoid page-breaking in the middle of something, YMMV. Also, try removing borders, and ensure there are no floats. See also CSS Page-Break Not Working in all Browsers.

Upvotes: 3

Simon Hayter
Simon Hayter

Reputation: 3171

Chrome has problems processing page-break-after, and page-break-inside this is a known bug and Google has said a few times to avoid using this type of styling since not only Chrome but many more browsers run into problems using it.

You should consider styling the tables thought DIV's rather than the tables themselves. Personally in this day and age its normally best to avoid using tables as they are not as flexible as DIV styling.

DIV styling as mentioned is more flexible and easy to work with and looks almost the same on all browsers since browsers tend to render tables differently across browers.

Here is a simple example of how to style the first table you have in DIV and is by far pixel perfect but should give you an idea. Almost the same with some improvement but without the font you use doesn't look as good, doesnt use image as the background which is ++ :P

CSS

#page {margin:0 auto;width:960px;padding:20px;background:#99deea;}
.myblock {background:#c1ebf2;padding:20px;border-radius:10px;}
.innerblock {width:33.3%;float:left;}
.innerblock h3 {font-size:20px;text-align:center;color:#424242;font-weight:bold;text-shadow:0 0 3px #FFFFFF;}
.innerblock h4 {font-size:14px;padding:10px 0 0 0;color:#778A2C;text-shadow:0 0 3px #FFFFFF;}
.innerblock p {font-size:16px;color:#7A8634;font-weight:bold;padding:0 0px 15px 75px;text-shadow: 0 1px 1px #FFFFFF;}

HTML

<div id="page">
<div class="myblock">
<div class="innerblock">
<h3>Spencer Hill</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Becca Ward $500</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Rachel Tourville $150</h3>
<h4>Recent Work:</h4>
 <p>Example Work Number 1</p>
 <p>Example Work Number 2</p>
 <p>Example Work Number 3</p>  
</div>
<div style="clear:both;"></div>
</div>
</div>

I've saved this code online for you to see and test, take a look at http://jsfiddle.net/tsd4V/

Again this is just a better method you can use table styling but don't use page-break if you want good cross browser compatibility.

Upvotes: 0

Related Questions