Table content is overlapping with table heading

Reply to Table content is overlapping with table heading on Invalid Date

Happy Patel — Invalid Date

I have one scenario and design like below example -
https://playground.jsreport.net/w/Heplinesss_17/49Lg~t9r

In that the table content is overlapping with heading for some amount of data. I have tried so many things but not able to resolve it. If I add more data that It will looks fine but for this much amount of data it is not working.

If you can look into it that will be great!

Thanks!

Reply to Table content is overlapping with table heading on Invalid Date

Happy Patel — Invalid Date

can we do anything for this?

Thanks

Reply to Table content is overlapping with table heading on Invalid Date

jan_blaha — Invalid Date

Perhaps this helps?

https://jsreport.net/learn/chrome-pdf#troubleshooting

tables with long content expand across multiple pages as needed, and if you have table headers/footer those will be replicated in each page which the table's content is present. however the headers/footers replicated in each page don't leave any kind of space by default, this result in having weird layout issues in which header content overlaps rows in other pages. The solution for this is to add the needed space (represented as padding) in an empty header/footer cell to properly separate the content that is split across pages. Example for this solution available here

Reply to Table content is overlapping with table heading on Invalid Date

Happy Patel — Invalid Date

It's not working unfortunately

Reply to Table content is overlapping with table heading on Invalid Date

bjrmatos — Invalid Date

@Happy-Patel it seems the chrome pdf rendering does not repeat the table header when you use flexbox, if i comment the css styles about flexbox it seems to work, check it here https://playground.jsreport.net/w/anon/0gXWMgN~

Reply to Table content is overlapping with table heading on Invalid Date

Happy Patel — Invalid Date

Hello @bjrmatos

Yes but the overlapping issue is still happening if comment the flex properties, So Is there any solution so the data will not overlap with the thead

https://playground.jsreport.net/w/Heplinesss_17/8GpSGu0Q

Thanks!

Reply to Table content is overlapping with table heading on Invalid Date

bjrmatos — Invalid Date

@Happy-Patel hmm why don't you use multiple rows in the tbody? i mean, why you put such a big content there in a single row? a single row with large content is not going to break nicely, chrome does not know at which point it should break it, one big row is going to overlap this way because chrome won't have a good idea to break the parts.

perhaps a good idea is to try to refactor the layout to use multiple rows