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

Top Border Not Rendering Correctly Across Page Breaks with dontBreakRows: true #2763

Open
jhrodriguesit opened this issue Aug 5, 2024 · 2 comments

Comments

@jhrodriguesit
Copy link

jhrodriguesit commented Aug 5, 2024

Hi, Hope you are all good.
I am encountering an issue with the dontBreakRows: true option in my implementation. Specifically, when a row with a top border is moved to the next page, the top border remains on the previous page rather than transferring to the new page with the row.

To address this issue, I have attempted a custom pageBreakBefore implementation. Despite this effort, the problem persists: while the row is correctly moved to the next page, the top border remains on the previous page.

Additionally, in my use case, where content is dynamic, I have experimented with a custom hLineWidth function to predict page breaks and set the border’s hLineWidth to 0. Unfortunately, this approach did not resolve the issue for all scenarios as the rows can change size/quantity.

Could you please confirm if this is a known issue or if there might be a misconfiguration on my part? Any insights or suggestions on how to resolve this would be greatly appreciated.

Thank you in advance

Playground example

var dd = {
	content: [
	    	{
			style: 'tableExample',
			table: {
				headerRows: 1,
				dontBreakRows: true,
				keepWithHeaderRows: 1,
				body: [
					[{text: 'Header 1', style: 'tableHeader'}, { text: 'Header 2', style: 'tableHeader'}, {text: 'Header 3', style: 'tableHeader'}],
					[
					    {text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
					    {text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
					    {text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}
					],
					[
					    {border: [false, true, false, false], text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'},
					    {text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'},
					    {text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}
					]
				],
				
			},
			layout: {
				defaultBorder: false,
			}

		}]
}

Screenshot (from playground example)

Screenshot 2024-08-05 at 8 03 04 PM

@fe-cj
Copy link
Contributor

fe-cj commented Aug 10, 2024

But what should be the correct outcome for this doc definition? I'd say the border should be drawn in the first and second page. The top border of the cell in the second page is the bottom border of the cell in the first page and pdfmake draws the border in both pages whenever there is a page break.

@jhrodriguesit
Copy link
Author

jhrodriguesit commented Aug 26, 2024

But what should be the correct outcome for this doc definition? I'd say the border should be drawn in the first and second page. The top border of the cell in the second page is the bottom border of the cell in the first page and pdfmake draws the border in both pages whenever there is a page break.

Thank you for your answer @fe-cj. Sorry about the delay, I was on leave.
Regarding the document definition, the expected behavior IMO is for the top border to be carried over to the next page. Since the border is specified as [false, TRUE, false, false] for the second row only, the top border should appear at the top of the cell on the subsequent page.

To provide more context, I’m generating a PDF where the top border serves as a "divider" between different sections. The issue arises when the entire content moves to the next page due to dontBreakRows: true, but the border remains on the previous page.

I hope this clarifies the situation. Please let me know if you need any further information or have additional questions!

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

2 participants