CSS page break issue (not working with Bootstrap)

[samuel....@gmail.com]

Dear all,

 Per the docs and w3c spec, I have tried every combination of page-break-inside/after/before and position/display etc on block level elements, however I am unable to control page break behaviour for jsreport using the Bootstrap grid system.

 

 

Given the code:

 

<div class="row">

    <div class="col-md-4">

        <label>text</label>

        <label>text</label>

    </div>

    <div class="col-md-4">

        <label>text</label>

        <label>text</label>

    </div>

    <div class="col-md-4">

        <label>text</label>

        <label>text</label>

    </div>

</div>

 

How am I able to prevent any page breaks from occurring within the element with the class "row"?

 

Note that I have also tried having removed all associated Bootstrap CSS, and am still unable to prevent page breaks given the above.

[Jan Blaha]

The problems with printing grid based bootstrap html pages using phantom-pdf recipe are usually caused by it's responsiveness. The recipe is using a fixed screen size during printing (currently 600x600) to which bootstrap reshapes the page. This is usually unwanted and makes the printed pdf look very much different than the original html. Another problem is that recipe applies bootstrap @media type styles during printing which also makes sometimes quite unexpected results in pdf. 

One think I can do here in jsreport is to make the values of the screen size configurable. This should make using responsive css easier. Although I am not sure if using such a complex responsive library makes sense for fixed sized pdf files.

However the core problem of page-break-inside style is missing support in phantomjs. There is a long discussion about it with some workarounds you may try here https://github.com/ariya/phantomjs/issues/10638#issuecomment-42676356

I have tried proposed workaround on my own and it works for some limited usage, maybe you will be lucky. 

[samuel....@gmail.com]

Many thanks for the prompt reply- even without Bootstrap the issue persists, so its good to know there is no page-break-inside support in phantomjs

 

Thank again