5

I have a bunch of small tables that are formatted as inline-block elements. In the browser they display side by side as intended, but when using mPDF to output them they break after each table. No matter how I try to format them, they always break after the table. Is there a trick with mPDF to get elements to stack side-by-side?

I am pulling the exact HTML from the page and sending it via AJAX

Below is an example of the browser and pdf view.

HTML View

PDF View

My mPDF generator page looks like this:

<?php
include("mpdf60/mpdf.php");

$html = $_POST['html'];

$mpdf=new mPDF('utf-8', 'A4');
$mpdf->SetDisplayMode('fullpage');

// LOAD a stylesheet
$stylesheet = file_get_contents('../../_css/main.css');
$mpdf->WriteHTML($stylesheet,1);    // The parameter 1 tells that this is css/style only and no body/html/text

$mpdf->WriteHTML($html);
$mpdf->Output('myPDF.pdf','D');

exit;
?>
Kirk Logan
  • 733
  • 2
  • 8
  • 23
  • Can we see the main.css? Looks like the width of both tables are too big to align them next to eachother. Keep in mind that the width of a mPDF page is around 800 pixels i believe. – Joey May 31 '15 at 14:47
  • That was my first thought so I tried putting the tables at 100px and it did not make a difference in their behavior. – Kirk Logan May 31 '15 at 14:48
  • Weird! But we can't see much without the CSS file. Also, which version of mPDF do you use? – Joey May 31 '15 at 14:49
  • I dont believe the CSS is going to help. I stripped out the CSS file from above code and ran it with just default html table styles (with the exception of inline styling the tables as inline-block elements) and it is displaying the same. I am on mPDF version 6.0. – Kirk Logan May 31 '15 at 14:54

2 Answers2

11

I try a lot of thinks too, but finally i found a solution, just use:

float: left;

Thats work for me.

JazMagno
  • 121
  • 2
  • 3
  • Please note that just using `float: left;` is not enough as you need to explicitly set a width on the element, as mentioned by [the docs](https://mpdf.github.io/what-else-can-i-do/floating-blocks.html). – Ro Achterberg Feb 18 '21 at 15:17
8

I've spent a couple of hours figuring out how to make inline <div> or <p> elements with mPDF. I found some limitations, which contains the inline-block too. The display: inline or display: inline-block is ignored. You have to put everything in <span> elements if you want to see them one beside the other.

Nagy Istvan
  • 202
  • 3
  • 12