Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images inside tables can cause rows to disappear in Version 0.5.0-beta.1 #192

Open
ef-anemetzfiedler opened this issue Mar 19, 2024 · 1 comment

Comments

@ef-anemetzfiedler
Copy link

ef-anemetzfiedler commented Mar 19, 2024

While Version 0.5.0-beta.1 already improves a lot on the way table breaks are handled (previously in 0.4.3, in certain cases an entire table row would disappear in our application, and we had to add it back using the provided hooks), there are still some issues I've found when using images inside of tables.

I've made self-contained html files, which you can open the same way as the examples in this repo.

Multiple Tables, Two equal-size Images in same Table

In some cases, images and their corresponding table rows are omitted. One such case is with a table that has two images next to eachother (file contains four identical tables):
example-images-multiple-columns-rows-omitted.txt

Page 1:

image

Page 2:

image

Multiple Tables, Two differently-sized Images in same Table

Changing the size of one of the two images in each table did not seem to change anything compared to the first case, so I will not explicitly give an example file here (feel free to experiment though).

Multiple Tables, Table with one Column containing Images

Curiously, when using exactly the same table as in the first example, but removing one column, the produced result is correct (file contains four identical tables):
example-images-single-column-correct-result.txt

Page 1:

image

Page 2:

image

Single Table, Text and Image in separate Columns

A less theoretical example: When using images in a table, sometimes I want to have a label and an image next to eachother. On a table break, the text stays on the first page if it fits, while the image does not fit and gets moved to the second page. Even when i give the tr the class break-inside-avoid, the two td elements do not seem to stay in the same row.

The following file contains 11 identical rows inside one table:
example-images-two-columns-text-and-image-break-inside-avoid-ignored.txt

image

If you want the last problem split into a separate issue, please let me know.

@ef-anemetzfiedler ef-anemetzfiedler changed the title Problems with images inside tables on table break in Version 0.5.0-beta.1 Problems with images inside tables on page break in Version 0.5.0-beta.1 Mar 19, 2024
@ef-anemetzfiedler
Copy link
Author

I realized I had an error in my example and did not define a css selector that would translate the class break-inside-avoid to break-inside: avoid;. Disregard the last part of the issue.

@ef-anemetzfiedler ef-anemetzfiedler changed the title Problems with images inside tables on page break in Version 0.5.0-beta.1 Images inside tables can cause rows to disappear in Version 0.5.0-beta.1 Mar 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant