diegomura / diegomura/react-pdf
Question/Feature Request: Force (wrapped) Elements near fixed footer / end of the page to render on new page
- 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).

**Maybe related content**
-
-
Contributor guide
Assessment
This issue has not been assessed yet.