mPDF position absolute

Question

I need to generate PDF file from HTML input:

<div style="width: 14cm; height: 21cm; position: relative">
  <img src="bg-image.jpg" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
  <img src="image.jpg" style="width: 100px; height: 100px; position: absolute; left: 5cm; top: 5cm">
</div>

where first image is background and second image is user input (smaller photo).

Problem is that when I try to generate in to PDF file with mPDF library, images are not displayed on one page, but one image is on first page, second image is on second page. So I think that absolute positioning does not work and I do not know how to fix it. I can not use first image as background image because its natural dimensions are smaller than background area it have to fill.

Can you give me some advice, please? What is wrong?

score 28 · Answer 1 · answered Jun 19 '13 at 20:40

28

mPDF only supports position:absolute|fixed partially - as root elements i.e. it will not position blocks absolutely inside another block. This is a known limitation of mPDF.

answered Jun 19 '13 at 20:40

Ruslan Safronov

381
2
3

OK, but is there any option to generate PDF from this: https://dl.dropboxusercontent.com/u/13057084/export-from.png (it is only image, but I do not know how to write it in HTML and CSS to get it to display the same in browser and in PDF. Also, when I define to mPDF that page size should by array(210,145), it generate ok, but when I add there image tag with style width: 21cm; height: 14.5cm, image is displaying only on part of PDF page.. I think it is weird because PDF page and image have same sizes (same after conversion) Sorry for my english... i hope you understand what I mean. – tomas657 Jun 23 '13 at 11:49

score 13 · Answer 2 · answered Jun 01 '13 at 16:29

13

I don't know mPDF but if the problem is absolute positioning you could just use float positioning with negative margins:

<img src="image.jpg" style="float: left; margin: -16cm 0 0 -9cm" />

answered Jun 01 '13 at 16:29

Tobag

170
1
10

score -1 · Answer 3 · edited Oct 25 '22 at 01:12

-1

I'm not an expert, still a newbie but here's what I did to move divs using css inline styling:

margin-top:-100px;

If you want to position a div inline to another div, just enter a negative value on your margin.

edited Oct 25 '22 at 01:12

Jeremy Caney

7,102
69
48
77

answered Oct 21 '22 at 08:55

Christian Colewan

1
2

mPDF position absolute

3 Answers3