mPDF and bootstrap column on next line

Question

I'm currently triyng to use mPDF to print a simple HTML page. The page is done using bootstrap and it is very basic. Following the documentation, I can print the pdf but while in HTML everything works perfectly, in the pdf the last column is placed on the next line.

Here is the code I'm currently using:

$mpdf = new mPDF('c');
$html = '<div class="container">
    <div class="row">
        <div class="col-xs-2" style="background-color: palevioletred;"><strong>A</strong></div>
        <div class="col-xs-4" style="background-color: #808080;"><strong>B</strong></div>
        <div class="col-xs-6" style="background-color: #008000;"><strong>C</strong></div>
    </div>
</div>';
$mpdf->WriteHTML(file_get_contents('./css/bootstrap.css'), 1);
$mpdf->WriteHTML($html, 2);
$mpdf->Output();

The expected output should be:

but instead the pdf is like this:

Any idea of why is this happening? Can it be fixed?

Solution 1

I know this is a work-around, but have you tried assuming the maximum column width is 10? I have found that rather than the sum of the columns being 12 (your example 2 + 4 + 6), if you assume 10 (2 + 3 + 5) the layout is pretty good.

<div class="container">
    <div class="row">
        <div class="col-xs-1 text-left">
            L
        </div>
        <div class="col-xs-8 col-sm-10 text-center">
            <h3>Hello</h3>
            <h4>World?</h4>
        </div>
        <div class="col-xs-1 text-right">
            R
        </div>
    </div>
 </div>

Solution 2

The mPDF docs explain why these Bootstrap column wrapping problems exist:

https://mpdf.github.io/what-else-can-i-do/floating-blocks.html

Note: The width that is set defines the width of the content-box. So if you have two floats with width=50% and either of them has padding, margin or border, they will not fit together on the page.

In Bootstrap 3, the columns are floated, with .row having margin-left and margin-right of -15px, and .col-{x} has padding-left and padding-right of 15px to space them out.

So my solution for the OP example is to remove the Bootstrap margins and padding as below:

$bootstrapCss = file_get_contents('./css/bootstrap.css');
$customCss = '
.row {
    margin-left: 0; 
    margin-right: 0; 
}

.row .col-xs-1, .row .col-xs-2, .row .col-xs-3, .row .col-xs-4, .row .col-xs-5, .row .col-xs-6, .row .col-xs-7, .row .col-xs-8, .row .col-xs-9, .row .col-xs-10, .row .col-xs-11, .row .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
}';

$combinedCss = $bootstrapCss . $customCss;

$mpdf->WriteHTML($combinedCss, 1);
$mpdf->WriteHTML($html, 2);

Note that if you write your styles using WriteHTML($styles, 2) you won't be able to use any other <style> tags in your HTML.

This works for my use case as I don't need the spacing of the col padding - but your mileage may vary.

Solution 3

this works for me-

first, remove all paddings

<div class="row">
<div class="col col-xs-4" style="padding:0px 0px 0px 0px"> 
</div>
<div class="col col-xs-4 text-center"  style="padding:0px 0px 0px 0px"> 
</div>
<div class="col col-xs-4 text-right"  style="padding:0px 0px 0px 0px"></div>
</div>