I am dynamically adding HTML from another page and styling it for print. However, page-break-inside: avoid;, when applied to my elements (any of them), does not seem to be taken into account when printing even though it shows up in the styles. I am using Chrome 31 on Windows
Here is a jsFiddle of the simplified version of my program (WARNING: It brings up the print preview after 3 seconds. To stop this simply comment out the setInterval at the bottom), This is the version where page-break-inside:avoid doesn't have any effect in print preview
The usual "fix" I've found, adding position:relative to the element and its parent, does not work in my case. Prefixing it (as a couple people suggested) doesn't seem to work either
I know page-break-inside: avoid; works in Chrome 31 with dynamically placed elements because I tested it out in a pseudo-version (WARNING: this also opens up print preview), but after spending hours removing code, playing around with the styles, and researching on the topic (most the posts are very outdated) I couldn't seem to get my more complex version working the same way
Thanks in advance for any insight!
Change display property on your #fromTumblr ID from inline-block to block.
It seems logical that page break rules don't apply on inline elements and since that ID is for wrapper element that exceeds page size I guess thats the reason all your other rules are ignored.
Here's updated fiddle, tested on Chrome 31 and FF26 on Windows: http://jsfiddle.net/FSyT5/27/