Member Avatar for KamiNuvini

Hi all,

I am converting an XML document to HTML/PDF. I use some of the Twitter Bootstrap 3 classes for layout, but since I pretty much go directly to PDF I have removed most of bootstrap's css (since I am not looking for a responsive layout, I want it to print to PDF exactly as it is viewed in HTML).

Now I seem to have removed a little bit too much CSS, but I cannot figure out exactly what is the cause. I have created a very minimal working (default css) + non-working (custom css) example. When I manually compare the CSS they seem to be identical.

Please read the HTML comments in my example, I have my own findings explained there. Would love some help in getting it fixed :)
http://jsbin.com/datucuhu/1

The issue is - with the CSS as it is in the above example, when I print, the "Test" text should be on a new page (through the break-before class).
This doesn't work with my current CSS, however if you remove the <style> bit and uncomment the default css, it will work and move the "Test" text to a new page when printing.

Thanks!

Edited by KamiNuvini
  • 2 Contributors
  • 1 Reply
  • 479 Views
  • 6 Months Discussion Span
  • Latest Post Latest Post by gabrielcastillo
Member Avatar for gabrielcastillo

What are you using to convert over to PDF? I understand that converting to pdf has some limitations when dealing with css.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.