Responsive Sizing

Sizing Modes

Document Stack supports multiple sizing approaches to handle variable content lengths and different page sizes:

Fixed Size (Pixels)

Set exact width and height values in pixels. The element stays exactly that size regardless of content.

• Best for logos, decorative elements, and images
• Content that overflows is clipped or hidden
• Predictable layout that won't shift

Percentage Width

Set width as a percentage of the page content area (page width minus margins). For example, 50% width means the element spans half the content area.

• Best for elements that should adapt to different page sizes
• A 100% width element spans the full content area
• Two 50% elements can sit side by side

Auto Height

When auto-height is enabled, the element grows vertically to fit its content. This is especially useful for:

• Text elements with variable-length content
• Field elements where data length varies per document
• Table elements with varying row counts

Minimum & Maximum Dimensions

Set constraints on how small or large an element can be:

• Min width — Element won't shrink below this width
• Max width — Element won't grow beyond this width
• Min height — Useful to ensure an element has a visible presence even with short content
• Max height — Prevents auto-height elements from growing too tall

Handling Text Overflow

When text content doesn't fit within an element's fixed dimensions:

• Visible — Content overflows beyond the boundary
• Hidden — Content is clipped at the boundary
• Ellipsis — Clipped content shows "..."

Choose the approach based on your use case. For invoices and formal documents, "hidden" or auto-height is usually better than letting text visually overflow.

Aspect Ratio Lock

Click the lock icon between width and height in the inspector to maintain the element's aspect ratio when resizing. This prevents images and logos from being stretched or squished.

Best Practices

• Use fixed sizes for elements with predictable content (logos, static text)
• Use auto-height for dynamic text content
• Always lock aspect ratio on images to prevent distortion
• Test templates with both short and long data to verify sizing works correctly
• Leave breathing room — don't make elements exactly the size of your test content

Next Steps

• Positioning & Alignment — Place elements on the canvas
• Data Binding — Dynamic content that varies per document
• Page Settings — Configure page dimensions