Automatic Height Calculation | Header & Footer

The extension automatically calculates header and footer heights based on your content. This means:

No Manual Height Setting: You don’t need to manually set heights for multiline content
Dynamic Adjustment: Heights adjust automatically when content changes
Responsive: Works with any amount of content

How It Works

The extension measures your header and footer content and automatically sets the appropriate height. This ensures that:

Single-line content uses minimal space
Multiline content gets the space it needs
Content is never cut off or clipped

Example: Automatic Height

// The header will automatically adjust its height to fit this content
PaginationPlus.configure({
  headerLeft: `<h1>Long Document Title</h1>
<p>Subtitle Line 1</p>
<p>Subtitle Line 2</p>
<p>Additional Information</p>`,
})

The extension will automatically calculate the height needed for all four lines of content.

Multiline Content

When you use multiline content, the height adjusts automatically:

PaginationPlus.configure({
  headerLeft: `<h1>Title</h1>
<p>Subtitle</p>
<small>Additional Info</small>`,
  footerLeft: `<p>Contact Information<br>
Email: info@example.com<br>
Phone: (555) 123-4567</p>`,
})

Both the header and footer will expand to accommodate all the content.

Dynamic Content Updates

When you update header or footer content dynamically using commands, the height recalculates automatically:

// The height will adjust when content changes
editor.chain().focus()
  .updateHeaderContent(
    '<h1>New Title</h1><p>New Subtitle</p><p>Even More Content</p>',
    'Page {page}'
  )
  .run()

Best Practices

Don’t worry about height - let the extension handle it
Use semantic HTML for better height calculation
Test with different content lengths to ensure everything displays correctly

Troubleshooting

Content Cut Off

If content appears cut off:

Check your margin settings
Ensure page height is sufficient for content
Verify HTML is properly formatted

Height Issues

The extension calculates heights automatically. If you experience issues:

Check for unclosed HTML tags
Verify inline styles are properly formatted
Ensure content doesn’t exceed reasonable limits

Multiline Support - Create multiline headers and footers
Rich Text Support - Format your content with HTML
Complete Examples - See automatic height in action