diegomura / diegomura/react-pdf

Question/Feature Request: Force (wrapped) Elements near fixed footer / end of the page to render on new page

Open
#3,052 1 comment 16 reactions 0 assignees View on GitHub
new feature
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Is your feature request related to a problem? Please describe.**

Problem: We render sections with dynamic content (such as HTML converted into React components) with a static title (`` component) near a fixed footer. These sections look similar to this

```tsx


{title}

{children}

```

This results in a situation where the content is squashed at the end of the page instead of breaking onto the next page. This is related to `wrap=false`. We currently use `wrap=false` but that squashes the content and we get errors like:

> “Node of type VIEW can’t wrap between pages and it’s bigger than available page height.”

**The Problem**: How can we keep the content together while at the same time do not leave the title alone on page 1 while the rest of the content breaks/wraps onto page 2 when the content is too long?

This issue makes the rendered document visually inconsistent and difficult to follow.

**Describe the solution you’d like**

A mechanism to ensure that elements near a fixed footer are forced to render on a new page, keeping them together even with `wrap=false` or a way to force elements to break to a new page if they are near the footer or a certain threshold of the page.

The expected behavior would be:

- If an element is positioned close to the fixed footer and doesn’t fit, it should automatically move to the next page.
- define that if an element is near the bottom of a page (threshold) it can be forced to render on the next page (independent of `wrap` value)
- Ensure that both static headers and dynamic content remain visually cohesive.
- Prevent errors related to wrapping constraints.

**Describe alternatives you’ve considered**
1. Manually adjusting margins and padding – This is inefficient, as the content is dynamic and unpredictable.
2. Using wrap=false – This leads to situations where content is forcefully squashed into one page, triggering errors.
3. Custom logic to detect height overflow – This would require extra development effort and might not be foolproof.

**Additional context**
- The dynamic content comes from external sources, meaning we do not have direct control over its structure or length.
- The issue occurs primarily when rendering paginated views with fixed headers/footers (I guess).

![Image](https://github.com/user-attachments/assets/74403a27-e1c6-47b3-834a-f75e6938440b)

**Maybe related content**
-
-

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.