On the page break, the image extends out of the table cell and overlays the next table cells text

[MavkaPoltavka]

Issue description

Hi,

I'm having a strange issue with the rendering images inside the table cell. Usually, everything works OK, but sometimes the PDF starts rendering the image that overlays the text below and moves from the cell's borders and its own table cell has the wrong height. This may happen only on page breaking. And I don't know what text length and image height will be rendered at the text cells on every row (second column).

Here are how it looks:

The second column has the style page-break-inside: auto;. The text always breaks and moves to the next page great and the image sometimes moves to another PDF page like on the screenshot above.

Expected or desired behavior

The image always should be moved to the next PDF page and rendered in the cell without moving from the cell borders.

System specifications

wicked_pdf gem version: 2.6.3

wkhtmltopdf version: 0.12.5

wkhtmltopdf-binary gem version:0.12.5.4

platform/distribution and version: Ubuntu 16.04

[chrise86]

I'm also having trouble with images breaking their parent container. Did you resolve this @MavkaPoltavka ?

[unixmonkey]

This is certainly an issue with the underlying wkhtmltopdf and not wicked_pdf. You might try upgrading (or downgrading) wkhtmltopdf or tweaking CSS styles, and might have some luck.

I think maybe you could use these css classes:

div.nobreak:before { clear:both; }
div.nobreak { page-break-inside: avoid; }

and wrap each <tr> with a non-breaking div like: <div class="nobreak"><tr><td>content</td></tr></div>, which I know isn't semantic, but I've seen it work. This should make your cell with the image in it get pushed entirely to the next page, if on a page boundary that would split it.

It might also be possible that you have it so that your images have a page-break-* rule, that you could set to auto.

It might also help to set the height attribute of the image on the tag like <img src="example.jpg" height="550"> or set the min-height of the <td> or <tr>.

Sorry I'm just throwing stuff out here, but wkhtmtopdf is using a very old version of the Chrome renderer (from like 2015 at the latest), and wkhtmltopdf layers some hacks on top of that to get reasonable multi-page PDFs, so it's going to take some trial and error with edge cases like this.

Let us know if you find any combination of things that works for you or not though! It will be appreciated by the many people who run into similar issues every day.